• Bootstrap模态框的基本使用2.0（复制可用）

    一、说明

    二、调整了哪些

    • [ 新增（css控制弹出） ] 操作不用.saveModal.click(function(){})点击事件，改为 data-toggle="modal" data-target="#modal-addOrEdit" 属性控制
    • [ 编辑 ] 操作不用.saveModal.click(function(){})点击事件，改为 editContent(1) 方法控制
    • [ 删除 ]
      • 点击方法从 _confirm('确定要删除[来日方长]吗? ','_delete',1)，调整为 delContent('来日方长', 1)
      • 模态框直接定义在html中；不再在js中拼接，再$('body').append(str);
      • 模态框隐藏从删除元素$('#modalConfirm,.modal-backdrop').remove(); 改为隐藏元素 $('#modalConfirm').modal('hide');
    • [ 弹窗 ]
      • 模态框直接定义在html中；不再在js中拼接，再$('body').append(str);
      • 模态框隐藏从删除元素$('#modalTip,.modal-backdrop').remove(); 改为隐藏元素 $('#modalTip').modal('hide');

    三、新增（css控制弹出） 按钮说明

    • 由于 新增（css控制弹出） 和 编辑 是引用的同一个模态框；新增是通过元素显示隐藏来实现的，并没有事件来控制。
    • 这就导致，如果表单已有数据（编辑之后：取消，点击 ×），再点击新增的时候，表单是有数据的。
    • 这个小问题，请根据实际情况进行调整：
      • 法1、已经实现，新增（事件控制弹出） 按钮。把新增弹窗改为和编辑弹窗一样，通过点击事件控制，在点击事件中重置表单 _reset(obj)
      • 法2、给编辑的 取消、× 加上事件，事件中加上表单重置方法 _reset(obj)，确定 按钮中已加上。
      • 法3、实际应用中：新增，编辑 在后台是不同的控制器。实际情况中可用模板引擎直接从后端传到前端页面，用模板引擎语法直接渲染数据；或者传info到页面，再用vue的:value v-model数据绑定也行。

    四、代码

    DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Bootstrap基本增删改 2.0title>
    
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">script>
    
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js">script>

    <style>

    style>
head>
<body>


<nav class="navbar navbar-default">
    <div class="container-fluid">
        
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Bootstrap案例a>li>
            ul>
            <form class="navbar-form navbar-right">
                <div class="form-group">
                    <input type="text" name="keyword" class="form-control" placeholder="请输入关键字">
                div>
                <button class="btn btn-default" onclick="vmt_form_search()">查询button>
            form>
        div>
    div>
nav>

<div style="margin:20px;">
    
    <div style="margin:10px;">
        <button class="btn btn-primary" data-toggle="modal" data-target="#modal-addOrEdit">新增（css控制弹出）button>
        <button class="btn btn-primary" onclick="addContent()">新增（事件控制弹出）button>
        <button class="btn btn-primary" onclick=output_excel()>查看视频button>
    div>

    
    <table class="table table-striped table-bordered">
        <tr class="active">
            <th>标题th>
            <th>图片th>
            <th>类型th>
            <th width=200px>创建时间th>
            <th width=150px>操作th>
        tr>
        <tr class="success">
            <th>来日方长th>
            <th>
                <a href="#" target="_blank">
                    查看
                a>
            th>
            <th>无限th>
            <th>2018-07-31th>
            <th>
                <button class="btn btn-primary btn-sm" onclick="editContent(1)">编辑button>
                <button class="btn btn-primary btn-sm" onclick="delContent('来日方长', 1)">删除button>
            th>
        tr>
        <tr class="info">
            <th>来日并不方长th>
            <th>
                <a href="#" target="_blank">
                    查看
                a>
            th>
            <th>有限th>
            <th>2018-07-31th>
            <th>
                <button class="btn btn-primary btn-sm" onclick="editContent(2)">编辑button>
                <button class="btn btn-primary btn-sm" onclick="delContent('来日并不方长', 2)">删除button>
            th>
        tr>
        <tr class="warning">
            <th>来日方长2号th>
            <th>
                <a href="#" target="_blank">
                    查看
                a>
            th>
            <th>无限th>
            <th>2018-07-31th>
            <th>
                <button class="btn btn-primary btn-sm" onclick="editContent(3)">编辑button>
                <button class="btn btn-primary btn-sm" onclick="delContent('来日方长2号', 3)">删除button>
            th>
        tr>
        <tr class="danger">
            <th>来日并不方长2号th>
            <th>
                <a href="#" target="_blank">
                    查看
                a>
            th>
            <th>有限th>
            <th>2018-07-31th>
            <th>
                <button class="btn btn-primary btn-sm" onclick="editContent(4)">编辑button>
                <button class="btn btn-primary btn-sm" onclick="delContent('来日并不方长2号', 4) ">删除button>
            th>
        tr>
        <tr class="active">
            <th>并不方长th>
            <th>
                <a href="#" target="_blank">
                    查看
                a>
            th>
            <th>其他th>
            <th>2018-07-31th>
            <th>
                <button class="btn btn-primary btn-sm" onclick="editContent(5)">编辑button>
                <button class="btn btn-primary btn-sm" onclick="delContent('并不方长', 5) ">删除button>
            th>
        tr>
    table>
    
    
    <div style="text-align:center;">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li>li>
                <li class="active"><a>1a>li>
                <li>li>
                <li><span>共 5 行 第1/1  页span>li>
            ul>
        nav>
    div>
div>


<div class="modal fade" id="modal-addOrEdit" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                button>
                <h4 class="modal-title" id="myModalLabel">新增h4>
            div>
            
            <div class="modal-body">
                
                <form id="adduser" class="form-horizontal" role="form">

                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">标题label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="title" name="title" placeholder="标题">
                        div>
                    div>

                    <div class="form-group">
                        <label for="url" class="col-sm-2 control-label">地址label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="url" name="url" value="http://"
                                   placeholder="图片地址">
                        div>
                    div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">类型label>
                        <div class="col-sm-10">
                            <div class="radio">
                                <label>
                                    <input type="radio" name="type" value="1" checked/>有限
                                label> 
                                <label class="margin-left-2em">
                                    <input type="radio" name="type" value="2"/>无限
                                label> 
                                <label class="margin-left-2em">
                                    <input type="radio" name="type" value="3"/>其他
                                label>
                            div>
                        div>
                    div>

                    
                    <div class="form-group">
                        <div class="col-sm-10">
                            <input type="hidden" class="form-control" name="id" value="1">
                        div>
                    div>

                form>
            div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消button>
                <button type="button" class="btn btn-primary saveBtn">确定button>
            div>
        div>
        
    div>
div>


<div class="modal fade" id="modalConfirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×button>
                <h4 class="modal-title">温馨提示h4>
            div>
            <div class="modal-body" id="delete-message">
                删除的提示内容
            div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消button>
                <button type="button" class="btn btn-primary">确定button>
            div>
        div>
    div>
div>


<div class="modal fade" id="modalTip" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body" id="api-message">
                消息提示的内容
            div>
        div>
    div>
div>


<div class="modal fade" id="vmt_video_detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="width:900px;height:450px">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×button>
                <h4 class="modal-title">视频详情h4>
            div>
            
            <div class="modal-body">
                <div>
                    <div style="float:left;width:500px;height:300px;">
                        <video class="vmt_video_src_class" id="vmt_video_src_id" width="500px" height="300px" src=""
                               controls="controls">video>
                    div>
                    <div style="margin-left:510px;">
                        <h3 class="vmt_template_name_class">h3>
                        <ul style="margin-top:30px">
                            <li><p><i class='glyphicon glyphicon-picture'>i> 最多30张图片p>li>
                            <li><p><i class='glyphicon glyphicon-time'>i> 最长10分钟p>li>
                            <li><p><i class='glyphicon glyphicon-object-align-right'>i> 不限横竖版p>li>
                            <li><p><i class='glyphicon glyphicon-fire'>i> 已有181人使用p>li>
                        ul>

                        <div style="margin-top:75px;margin-left:80px">
                            <a type="button" class="btn btn-info col-md-8 vmt_choose_temp_calss">创建视频a>
                        div>
                    div>
                div>

            div>
            
        div>
        
    div>
div>


<script>
    $(function () {	//关闭视频模态框时，视频停止播放
        $('#vmt_video_detail').on('hide.bs.modal', function () {
            var this_video = $('#vmt_video_src_id')[0];
            this_video.currentTime = 0;    //属性设置或返回音频/视频播放的当前位置（以秒计）。当设置该属性时，播放会跳跃到指定的位置。
            this_video.pause();
        });
    });

    //弹出视频模态框操作，并根据class动态显示模态框中的数据
    function output_excel() {
        $('#vmt_video_detail').modal('show');
        $('#vmt_video_detail').find('.vmt_template_name_class').text('动态显示头');	//动态显示头
        $('#vmt_video_detail').find('.vmt_video_src_class').attr('src', 'http://d.itheima.com:81//dd/Python/Scrapy%E7%88%AC%E8%99%AB%E6%A1%86%E6%9E%B6/00.Scrapy%E6%9E%B6%E6%9E%84%E6%B5%81%E7%A8%8B%E4%BB%8B%E7%BB%8D.mp4');	//动态显示url地址
        //$('#vmt_video_detail').find('.vmt_choose_temp_calss').attr('href', '#');
        $('#vmt_video_detail').find('.vmt_choose_temp_calss').click(function () {
            _alert('点我干嘛！');
            $('#vmt_video_detail').modal('hide'); //模态框隐藏
        });
    }

    //控制新增弹窗事件
    function addContent() {
        var modalElem = '#modal-addOrEdit';
        $(modalElem).find('#myModalLabel').text('新增');//modal头部
        _reset($(modalElem).find('form'));//重置表单
        $(modalElem).modal('show');//显示出弹出层
    }

    //【编辑弹窗】：数据回显，这里为了演示，直接从数组里拿
    function editContent(id) {
        var info = getEditJsonDataById(id); //获取当前数据明细

        var modalElem = '#modal-addOrEdit';

        $(modalElem).find('#myModalLabel').text('编辑 ' + info.title);//modal头部
        // _reset($(modalElem).find('form'));//重置表单

        renderDataToHtml(info); //数据回显
        $(modalElem).modal('show');//显示出弹出层
    }

    //【添加，编辑确认按钮】
    $('.saveBtn').click(function () {
        let addEditModalId = "#modal-addOrEdit";
        var modalObj = $(this).parents(addEditModalId);//弹出框对象
        var str = modalObj.find('#myModalLabel').text();//moda 头部
        var url = (str == "新增" ? 'add' : 'edit');
        var data = modalObj.find('form').serialize();
        //把这里与后台交互的Ajax直接改为弹出框操作
        /*$.ajax({
            url:url,
            data:data,
            cache:false,
            dataType:'json',
            type:'post',
            success:function(result){
                //成功提示模态框
                if( result === false )
                    _alert( '系统出现问题，请联系管理员！' )
                if(result.status=='success'){
                    _alert(result.message,1);
                    $(addEditModalId).modal('hide');//隐藏
                }else{
                    //失败提示模态框
                    _alert(result.message)
                }
                _reset($(addEditModalId).find('form'));//重置表单
            },
            error:function(){
                _alert('系统出现问题，请联系管理员！');
                _reset($(addEditModalId).find('form'));//重置表单
            }
        });*/
        //START 模拟成功
        _alert('模拟 ' + str + ' 成功！', 1);
        $(addEditModalId).modal('hide'); //模态框隐藏

        _reset($(addEditModalId).find('form'));//重置表单

        //END 模拟成功
    });

    /*
     * 【删除弹框确认】
     * title 标题
     * params回调函数的参数值 可不填  多参数可用数组形式 例如  delContent('确定要删除该菜单吗? ','delMenu',['1','del'])
     */
    function delContent(title, params) {
        var callbackFun = 'apiTest'; //点击确认 回调函数名称

        var content = "确定删除 " + title + " 吗？";
        $('#delete-message').html(content); //设置确认提示内容

        $('#modalConfirm').modal('show');
        $('#modalConfirm .btn-primary').click(function () {
            if (callbackFun != null)
                window[callbackFun](params);

            //1.0是拼接内容到body中，$('body').append(str);使用remove，现在是本来就在body中，只需hide就行了
            $('#modalConfirm').modal('hide');
            // $('#modalConfirm,.modal-backdrop').remove();
        });
    }

    /*
     * 【表单重置】
     * @params obj  可传对象  也可以传class或id名 示例  _reset($('#id')) _reset('#id')  _reset('.class')  _reset( this )
     */
    function _reset(obj) {
        if (!(obj instanceof jQuery)) { //如果不是对象的话
            obj = $(obj)
        }
        obj[0].reset();//重置表单
        obj.find('input[type="hidden"]').val('');//解决不支持隐藏表单reset的浏览器
    }

    //【数据回显：编辑操作】
    // 实际情况中可用模板引擎直接从后端传到前端页面，用模板引擎语法直接渲染数据；
    // 或者传info到页面，再用vue的:value v-model数据绑定也行
    function renderDataToHtml(data) {
        $("#id").val(data['id']);	//给隐藏表单主键ID赋值
        $("#title").val(data['title']);
        $("#url").val(data['url']);
        $('input[type="radio"][name="type"][value="' + data['type'] + '"]').prop("checked", 'checked');

        //$('#myModal').find("#ausername,#apassword").attr('disabled','disabled');
        //admin与其他用户的不同
        //不能更改超管的角色(隐藏方框)
        /* if(data['username']=='admin'){
            $('#changeStatus,#roleChoose').hide();
        }else{
            $('#changeStatus,#roleChoose').show();
        } */
    }

    //在公共的js页面中加入此段代码，即可禁止所有modal加载缓存的内容！
    /*$('body').on('hidden.bs.modal', '.modal', function () {
        $(this).removeData('bs.modal');
    });*/

    /*
     * 【弹出提示框，2秒后消失】
     * content 提示内容
     * url 跳转链接  1本地刷新  链接跳转 可不传 不传不跳转
     */
    function _alert(content, url) {
        $('#api-message').html(content); //设置消息提示内容
        $('#modalTip').modal('show');
        setTimeout(function () {

            //1.0是拼接内容到body中，$('body').append(str);使用remove，现在是本来就在body中，只需hide就行了
            $('#modalTip').modal('hide');
            // $('#modalTip,.modal-backdrop').remove();
            if (url != null) {
                //暂时注释页面刷新操作
                /* if(  url == 1 )
                    location.reload();
                else
                    location.href = url; */
            }
        }, 2000)
    }

    /*
     * 【Ajax模拟请求后台接口】
     * @params params id 数据id
     */
    function apiTest(id) {
        $.ajax({
            url: 'delete',
            data: {id: id},
            type: 'get',
            dataType: 'json',
            cache: false,
            success: function (result) {
                if (result.status == 'success') {
                    _alert(result.message, 1);
                } else {
                    _alert(result.message);
                }
            },
            error: function () {
                _alert('系统出现问题，请联系管理员！');
            }
        });
    }

    //前端写死数据用于数据回显
    function getEditJsonDataById(id) {
        var data = [
            '{"id":1,"title":"来日方长","url":"http://1","type":2,"create_time":"2018-07-31"}',
            '{"id":2,"title":"来日并不方长","url":"http://2","type":1,"create_time":"2018-07-31"}',
            '{"id":3,"title":"来日方长2号","url":"http://3","type":2,"create_time":"2018-07-31"}',
            '{"id":4,"title":"来日并不方长2号","url":"http://4","type":1,"create_time":"2018-07-31"}',
            '{"id":5,"title":"并不方长","url":"http://5","type":3,"create_time":"2018-07-31"}',
        ];
        var dataStr = data[id - 1];
        var dataObj = eval('(' + dataStr + ')');	//字符串转json对象
        return dataObj;
    }
script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
    • 250
    • 251
    • 252
    • 253
    • 254
    • 255
    • 256
    • 257
    • 258
    • 259
    • 260
    • 261
    • 262
    • 263
    • 264
    • 265
    • 266
    • 267
    • 268
    • 269
    • 270
    • 271
    • 272
    • 273
    • 274
    • 275
    • 276
    • 277
    • 278
    • 279
    • 280
    • 281
    • 282
    • 283
    • 284
    • 285
    • 286
    • 287
    • 288
    • 289
    • 290
    • 291
    • 292
    • 293
    • 294
    • 295
    • 296
    • 297
    • 298
    • 299
    • 300
    • 301
    • 302
    • 303
    • 304
    • 305
    • 306
    • 307
    • 308
    • 309
    • 310
    • 311
    • 312
    • 313
    • 314
    • 315
    • 316
    • 317
    • 318
    • 319
    • 320
    • 321
    • 322
    • 323
    • 324
    • 325
    • 326
    • 327
    • 328
    • 329
    • 330
    • 331
    • 332
    • 333
    • 334
    • 335
    • 336
    • 337
    • 338
    • 339
    • 340
    • 341
    • 342
    • 343
    • 344
    • 345
    • 346
    • 347
    • 348
    • 349
    • 350
    • 351
    • 352
    • 353
    • 354
    • 355
    • 356
    • 357
    • 358
    • 359
    • 360
    • 361
    • 362
    • 363
    • 364
    • 365
    • 366
    • 367
    • 368
    • 369
    • 370
    • 371
    • 372
    • 373
    • 374
    • 375
    • 376
    • 377
    • 378
    • 379
    • 380
    • 381
    • 382
    • 383
    • 384
    • 385
    • 386
    • 387
    • 388
    • 389
    • 390
    • 391
    • 392
    • 393
    • 394
    • 395
    • 396
    • 397
    • 398
    • 399
    • 400
    • 401
    • 402
    • 403
    • 404
    • 405
    • 406
    • 407
    • 408
    • 409
    • 410
    • 411
    • 412
    • 413
    • 414
    • 415
    • 416
    • 417
    • 418
    • 419
    • 420
    • 421
    • 422
    • 423
    • 424
    • 425
    • 426
    • 427
    • 428
    • 429
    • 430
    • 431
    • 432
    • 433
    • 434
    • 435
    • 436
    • 437
    • 438
    • 439
    • 440
    • 441
    • 442
    • 443
    • 444
    • 445
    • 446
    • 447
    • 448
    • 449
    • 450
    • 451
    • 452
    • 453
    • 454
    • 455
    • 456
    • 457
    • 458
    • 459
    • 460
    • 461
    • 462
    • 463
    • 464
    • 465
    • 466
    • 467
    • 468
    • 469
    • 470
    • 471
    • 472
    • 473
    • 474
    • 475
    • 476
    • 477
    • 478
    • 479
    • 480
    • 481
    • 482
    • 483
    • 484
  • 相关阅读:
    Dubbo框架实现RPC远程调用包括nacos的配置和初始化
    C语言tips-字符串处理函数及其实现
    Anaconda的安装使用及pycharm设置conda虚拟环境
    transformer_01
    【node】nodemailer配置163、qq等邮件服务指南
    Cholesterol-PEG-NHS，NHS-PEG-CLS，胆固醇-聚乙二醇-活性酯修饰小分子材料
    C++ 虚函数表
    基于SqlSugar的开发框架循序渐进介绍（14）-- 基于Vue3+TypeScript的全局对象的注入和使用
    LeetCode 212.单词搜索Ⅱ Python题解
    CICD——gitea+drone部署
  • 原文地址：https://blog.csdn.net/qq_36025814/article/details/126814043