大家好。
我在 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">×</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>
最佳答案
你需要像这样调用模态
$('#generalCusModal').modal('show');
而不是
$('body').addClass('modal-open');
$('#generalCusModal12').show();
注意:您还在 Javascript generalCusModal12 中提供了错误的 ID，其中您的 ID 为 generalCusModal
关于javascript - 无法在 jQuery 打开的模态上添加背景属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37540118/