我在使用 jQuery 生成引导模式时注意到一个问题。在动态生成的部分视图(我的模式)中添加更多 JavaScript 会导致出现双背景。有谁知道为什么会发生这种情况?我正在使用 jquery-1.8.2.js 和 Bootstrap v3.1.1。非常感谢。
App.js
$(document).ready(function () {
$('.modal-button').on('click', function (e) {
// Remove existing modals.
$('.modal').remove();
$.ajax({
url: '/Ajax/GetSearchModal/',
type: "get",
cache: false,
success: function (data) {
var modal = $(data);
$(data).modal({
backdrop: 'static',
keyboard: false,
});
}
});
});
});
部分视图(我的模态)
@model MVCApp.Web.Models.ModalSearchModel
<div id="Ajax-Modal" class="modal fade" aria-hidden="true" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>
Select Something
</h3>
</div>
@using (Html.BeginForm(Model.Action, Model.Controller, FormMethod.Post))
{
<div class="modal-body">
@Html.HiddenFor(m => m.SelectedDropDownID, new { @class = "select-something-ddl", style = "width:100%", placeholder = "Search..." })
</div>
<div class="modal-footer">
<button type="submit" value="Continue">Continue</button>
<button type="button" value="Cancel" data-dismiss="modal">Cancel</button>
</div>
}
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
// This here causes the drop backdrop
// select2 code here
});
</script>
UPDATE
将 javascript 从模式移动到成功处理程序并不能满足我想要实现的目标。我希望启动 select2 下拉列表。我可以让它在成功处理程序中工作的唯一方法是使用以下内容:
modal.on('shown.bs.modal', function () {
$('#SelectedDropDownID').select2({
ajax: {
url: '/Ajax/FetchResults/',
dataType: 'json',
delay: 250,
data: function (searchTerm) {
return { query: searchTerm };
},
results: function (data) {
return { results: data };
}
},
minimumInputLength: 2,
formatResult: formatRepo,
formatSelection: formatRepoSelection
});
});
但是, select2 激活存在延迟,因为直到模态完成动画进入屏幕后才会触发显示的事件。如果我在显示的事件之外运行代码, select2 永远不会激活。
SOLVED
非常感谢 Pasha Zavoiskikh 和 cvrebert。我必须更新 Bootstrap 和 jQuery 来修复双背景。根据 Pasha 的评论,在调用 select2 之前将模态附加到正文修复了 select2 不触发。这是完整的修复:
function formatRepo(item) {
var markup = "<table class='item-result'><tr>";
if (item.text !== undefined) {
markup += "<div class='item-name' data-jtext=" + item.text + " data-jid=" + item.id + ">" + item.text + "</div>";
}
markup += "</td></tr></table>"
return markup;
}
function formatRepoSelection(item) {
return item.text;
}
$('.modal-button).on('click', function (e) {
// Delete existing modals.
$('.modal').replaceWith('');
// Get modal.
$.ajax({
url: '/Ajax/GetSearchModal/',
type: "get",
cache: false,
success: function (data) {
var modal = $(data);
$('body').append(modal);
$('#SelectedDropDownID').select2({
ajax: {
url: '/Ajax/FetchResults/',
dataType: 'json',
delay: 250,
data: function (searchTerm) {
return { query: searchTerm };
},
results: function (data) {
return { results: data };
}
},
minimumInputLength: 2,
formatResult: formatRepo,
formatSelection: formatRepoSelection
});
modal.modal({
backdrop: 'static',
keyboard: false,
});
}
});
});