javascript - 无法在 jQuery 打开的模态上添加背景属性

Question

大家好。

我在 jQuery 打开的模式上设置背景属性时遇到问题。我在我的表格设计中使用了一个 dataTable 插件，我创建了一组 DataTable 按钮，每个按钮都会显示模式。顺便说一句，我正在使用 ASP.net MVC 4。任何帮助将不胜感激。

这是我的 DataTable 表的代码:

<table id="exampledatatable" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" >
<thead>
    <tr>
        <th>Customer Code</th>
        <th>Customer Name</th>
        <th>Customer Type</th>
        <th>Industry Type</th>
        <th>Website</th>
        <th>Email</th>
        <th>Off Day 1</th>
        <th>Off Day 2</th>
        <th>E-mail</th>
        <th>Actions</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Tiger</td>
        <td>Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
        <td>5421</td>
        <td>t.nixon@datatables.net</td>
    </tr>

这是我的数据表按钮的代码

 $(document).ready(function () {
    $('#exampledatatable').DataTable({
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'copyHtml5',
                text: '',
                titleAttr: 'Create New Record',
                action: function (e, dt, node, config) {
                    $('body').addClass('modal-open');
                    $('#generalCusModal12').show();
                }
            },
            {
                extend: 'csvHtml5',
                text: '',
                titleAttr: 'Edit Existing Record'
            },
            {
                extend: 'csvHtml5',
                text: '',
                titleAttr: 'Delete Existing Record'
            },
            {
                extend: 'pdfHtml5',
                text: '',
                titleAttr: 'Restore Deleted Record'
            },
            {
                extend: 'pdfHtml5',
                text: '',
                titleAttr: 'Refresh Records'
            },
            {
                extend: 'pdfHtml5',
                text: '',
                titleAttr: 'Print Records'
            },
            {
                extend: 'pdfHtml5',
                text: '',
                titleAttr: 'Close'
            }
        ]
    });
});

这是我的模态弹出窗口

<div id="generalCusModal12" class="modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header modal-header-employee">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title"><img class="crud" src="~/Images/profile.png" />Customer Records Management</h3>
            </div>

            <div class="modal-body">
                <h4 class="lbl_custinfo">General</h4>
                <div class="form-group row">
                    <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Customer Code</label>
                    <div class="col-xs-8 col-sm-6">
                        <input class="form-control" type="text" placeholder="<Auto>" disabled>
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Customer Name</label>
                    <div class="col-xs-8 col-sm-6">
                        <input class="form-control" type="text">
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Company Type</label>
                    <div class="col-xs-8 col-sm-6">
                        <select class="form-control" id="sel1" disabled>
                            <option value="">CUSTOMER</option>
                        </select>
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Customer Type</label>
                    <div class="col-xs-8 col-sm-6">
                        <select class="form-control" id="sel1">
                            <option value="" selected></option>
                            <option>WALK-IN</option>
                            <option>RESIDENTIAL</option>
                            <option>COMPANY</option>
                            <option>SCHOOL</option>
                            <option>BANK</option>
                            <option>CLINIC</option>
                            <option>RESTAURANT</option>
                            <option>HOSPITAL</option>
                            <option>HOTEL</option>
                        </select>
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Industry Type</label>
                    <div class="col-xs-8 col-sm-6">
                        <select class="form-control" id="sel1">
                            <option value="" selected disabled></option>
                            <option>ADVERTISING AGENCIES</option>
                            <option>BUSINESS PROCESS OUTSOURCING</option>
                            <option>ENTERTAINMENT COMPANY</option>
                            <option>FOOD COMPANY</option>
                            <option>TECHNOLOGY</option>
                            <option>TELECOMMUNICATION</option>
                            <option>PHARMACEUTICAL</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Day Off 1</label>
                    <div class="col-xs-8 col-sm-6">
                        <select class="form-control" id="sel1">
                            <option value="" selected disabled></option>
                            <option>MONDAY</option>
                            <option>TUESDAY</option>
                            <option>WEDNESDAY</option>
                            <option>THURSDAY</option>
                            <option>FRIDAY</option>
                            <option>SATURDAY</option>
                            <option>SUNDAY</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Day Off 2</label>
                    <div class="col-xs-8 col-sm-6">
                        <select class="form-control" id="sel1">
                            <option value="" selected disabled></option>
                            <option>MONDAY</option>
                            <option>TUESDAY</option>
                            <option>WEDNESDAY</option>
                            <option>THURSDAY</option>
                            <option>FRIDAY</option>
                            <option>SATURDAY</option>
                            <option>SUNDAY</option>
                        </select>
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Email</label>
                    <div class="col-xs-8 col-sm-6">
                        <input class="form-control" type="text">
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Website</label>
                    <div class="col-xs-8 col-sm-6">
                        <input class="form-control" type="text">
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label"></label>
                    <div class="col-xs-8 col-sm-6">
                        <textarea class="form-control" rows="4" style="min-width: 100%"></textarea>
                    </div>
                </div>
            </div><!--MODAL BODY-->

            <div class="modal-footer">

                <button type="button" class="btn btn-primary" data-target="#custLocationModal" data-toggle="modal" data-dismiss="modal">Next</button>
                <button type="button" class="btn btn-default">Clear</button>
            </div>
        </div>
    </div>
</div>

Answer 1

你需要像这样调用模态

$('#generalCusModal').modal('show');

而不是

$('body').addClass('modal-open');
$('#generalCusModal12').show();

参见Bootstrap Documentation

注意:您还在 Javascript generalCusModal12 中提供了错误的 ID，其中您的 ID 为 generalCusModal