模态窗口 嵌入 datatable 作为弹出框

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_29883183/article/details/80895446

模态窗口:  是如果打开的是模态窗口,那么你就只能对模态窗口进行操作,

                   除非采取有效的关闭手段,否则不能操作模态窗口以外的界面

 

设置模态窗口的位置

var $box = $('#myModal5'); //要想复制此段代码在浏览器console执行,left:"200px" 必须是字符串
    $box.css({
        // position: 'absolute',
        //设置弹出层距离左边的位置
        left: ($("body").width() - $box.width()) / 2 + 250 + "px", //$("body").width()值是1920
        //设置弹出层距离上面的位置
        top: ($(window).height() - $box.height()) / 2 + $(window).scrollTop() + 120 + "px",
        display: "block"
    });

引入

<script src="js/jquery-3.2.1.min.js "></script>

<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>

 

<%--弹出层模态窗口&times; 为了设置模态窗口的长度和宽度,如果能不冲突引入bootstrap.mini.css
则可以class="modal-dialog modal-lg"添加modal-sm来使用3种宽度 modal-lg(最大) 默认(中)modal-sm(最小)
这里是自己写的css .modal-lg{width:900px;}
--%>
<div class="modal fade modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header" style="border-bottom:0;margin-bottom: 0;padding-bottom: 0">
            <button type="button" class="btn btn-primary radius showss" data-dismiss="modal" aria-hidden="true" style="float: right;position: relative;top: 10px">
                    关闭
            </button>
            <h4 class="modal-title" id="myModalLabel" style="font-weight:bold">
               推送失败详情
            </h4>
         </div>
         <div class="modal-body" style="padding: 10px">
                <table id="tabledatadetail" class="display table-striped table-bordered table-hover table-condensed dataTable no-footer" style="width:100%"></table>
         </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>
/* .modal_lg{  写在外面才能设置模态窗口的宽度
     width: 600px;
     !*padding: 25px 0px;*!
 }*/

 

模态窗口的<button>确认按钮绑定事件

 

 

onclick="delIndustryReport()"

 

$(document).on('click','#delReport',function(){ //点击插件的取消按钮,将隐藏域的数据清空
    var id = $('#id').val();
    var param={
        id:id
    };
    $.ajax({
        type: "POST",
        contentType: 'application/json; charset=UTF-8',
        dataType: "json",
        data:JSON.stringify(param),
        url: "delReport",
        async: true,
        success: function () {
            search();
        },
        error: function (ret) {
        }
    });
});

 

 

 

function hide() {
    $("#myModal").modal("hide"); //隐藏模态窗口
}
//
function show() {
    var $box = $('#myModal'); //要想复制此段代码在浏览器console执行,left:"200px" 必须是字符串
    $box.css({
        // position: 'absolute',
        //设置弹出层距离左边的位置
        left: ($("body").width() - $box.width()) / 2 + 250 + "px",
        //设置弹出层距离上面的位置
        top: ($(window).height() - $box.height()) / 2 + $(window).scrollTop() + 35 + "px",
        display: "block"
    });

    $("#myModal").show();  //点击模态窗口遮罩层会关闭模态窗口的bug
    $('#myModal').modal({
        backdrop: 'static',
        show: false
    });

    $("#myModal").modal("show");//显示模态窗口
}

 

$(“#mymodal”).modal(“toggle”)

触发时,反转模态弹出窗的状态。如果模态弹出窗是显示的,则关闭;反之,如果模态弹出窗是关闭的,则显示

columnDefs: [
    {
        targets: 0,
        "orderable": false,
    },
    {
        targets: 1,
        "orderable": false,
    },
    {
        targets: 2,
        "orderable": false,
    },
    {
        targets: 3,
        "orderable": false,
        /*render: function (a, b, c, d) {
            return "<a onclick=show('"+c.pushDate+"')>"+a+"</a>";
        }*/
    },
    {
        targets: 4,
        "orderable": false,
    }
],
"searching": false,//取消搜索
// aaSorting:[[1,"desc"]] ,    //设置排序的初始列和排序规则,

排序列的设置

 

columnDefs: [
    { "bSortable": false, "aTargets": [ 0,1,2,3,4 ] }, //指定不参与排序的列,配合order:[]一起使用,使所有列都不参与排序
    /*{
        targets: 0,
        "orderable": false,   //多写几遍,使 0 1 2 3 4 都不参与排序
    },
    {
        targets: 1,
        "orderable": false,
    },
    {
        targets: 2,
        "orderable": false,
    },
    {
        targets: 3,
        "orderable": false,
        /!*render: function (a, b, c, d) {
            return "<a onclick=show('"+c.pushDate+"')>"+a+"</a>";
        }*!/
    },
    {
        targets: 4,
        "orderable": false,
    }*/
],
order:[],

 

阅读更多

没有更多推荐了,返回首页