Bootstrap Modal 只顯示一次
[英]Bootstrap Modal shown only once
問題描述
我試圖在我的 ASP.Net MVC 5 項目中使用 Bootstrap Modals。 我的頁面上有兩個容器div ：
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="#smallModal" aria-hidden="true">
</div>
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="#smallModal" aria-hidden="true">
</div>
我用這些填充並展示它們：
function addBandOnClick() {
var options = {
"backdrop" : "static",
"keyboard": "false",
"show" : "true"
}
$('#addModal').load('@Url.Action("Add")');
$('#addModal').modal(options);
}
function editOnClick(Id) {
var options = {
"backdrop": "static",
"keyboard": "false",
"show": "true"
}
var url = 'Home/Edit/' + Id;
$('#editModal').load(url);
$('#editModal').modal(options);
}
因此，在單擊按鈕時，我加載所需的布局並將其顯示給用戶。 一切正常，除了模態只顯示一次，在我以任何方式關閉模態后，我無法再次訪問它，它只是不可見。
這是代碼：
Index.cshtml ：
@model IEnumerable<TestShit.Models.MetalBand>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<a onclick="addBandOnClick()" href="#">Add Band</a>
<table id="table_id" class="display">
<thead>
<tr>
<th>@Html.DisplayNameFor(model => model.BandName)</th>
<th>@Html.DisplayNameFor(model => model.MetalGenre)</th>
<th>Actions</th>
</tr>
</thead>
</table>
</div>
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="#smallModal" aria-hidden="true">
</div>
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="#smallModal" aria-hidden="true">
</div>
<script>
var table;
function addBandOnClick() {
var options = {
"backdrop" : "static",
"keyboard": "false",
"show" : "true"
}
$('#addModal').load('@Url.Action("Add")');
$('#addModal').modal(options);
}
function editOnClick(Id) {
var options = {
"backdrop": "static",
"keyboard": "false",
"show": "true"
}
var url = 'Home/Edit/' + Id;
$('#editModal').load(url);
$('#editModal').modal(options);
}
$(document).ready(function () {
table = $('#table_id').DataTable({
"ajax": '@Url.Action("GetBands", "Home")',
"columns": [
{ "data": "BandName" },
{ "data": "MetalGenre.GenreName" },
{
mData: null,
mRender: function (d, t, r) {
var Id = r.ID;
var link = '<a style="text-decoration: none" onclick="editOnClick(' + Id + ')" href="#">' +
"<img width=\"24\" height=\"24\" src=\"Content/Images/edit.png\"/></a> |" +
"<a onclick=\"deleteBand(" + Id + ")\"><img src=\"Content/Images/delete.png\"/></a>";
return link;
}
}
]
});
});
$('body').on('hidden.bs.modal', '.modal', function () {
var parent = $('#modalContainer').parent();
parent.empty();
parent.removeAttr('style');
$(this).removeData('bs.modal');
});
function applyModal(btnClicked) {
var $form = $(btnClicked).parents('form');
var url = $form.attr('action');
var data = $form.serialize();
$.post(url, data, function () {
table.ajax.reload(null, false);
});
}
function deleteBand(id) {
$.post("Home/Delete/" + id, function () {
table.ajax.reload(null, false);
});
}
</script>
</body>
</html>
和AddEdit.cshtml （由Add和Edit/ID操作返回的那個）：
@model TestShit.Models.MetalBand
<div class="modal-dialog modal-sm" id="modalContainer">
<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">@ViewBag.Title</h4>
</div>
@using (Html.BeginForm())
{
<fieldset>
<div class="modal-body">
<div>
<p>@Html.DisplayNameFor(model => model.BandName)</p>
<p>@Html.EditorFor(model => model.BandName)</p>
<p>@Html.DropDownListFor(model => model.MetalGenreID, new SelectList(ViewBag.Genres, "ID", "GenreName"))</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button onclick="applyModal(this)" data-dismiss="modal" class="btn btn-primary">@ViewBag.ButtonText</button>
</div>
</fieldset>
}
</div>
</div>
拜托，我真的看不出我做錯了什么=（
2 個解決方案
解決方案1
0 已采納 2015-02-13 14:57:49
你的問題在這里：
$('#addModal').load('@Url.Action("Add")');
$('#addModal').modal(options);
它應該這樣做：
$('#addModal').load('@Url.Action("Add")', function () {
$('#addModal').modal(options);
});
因為，當你做第一種方式時，
$('#addModal').modal(options);
之后立即被解雇
$('#addModal').load('@Url.Action("Add")');
由於這些函數的異步執行而導致麻煩。 正確的方法是使用回調）在這種情況下，系統將等待加載完成，然后它會顯示您的模態，祝您好運！
解決方案2
0 2020-07-07 12:51:52
if (document.cookie.indexOf('modal_shown=') >= 0) {
//do nothing if modal_shown cookie is present
}
else {
//set cookie modal_shown
//cookie will expire when browser is closed
if (imageTitle != "") {
$('#myModalGallery').modal('show'); //show modal pop up
document.cookie = 'modal_shown=seen';
}
else {
$('#myModalGallery').modal('hide');
}
}
this will help u dear it is working fine for me
JS用所選文本填充Bootstrap模態似乎只起作用一次
[英]JS to populate Bootstrap modal with selected text only seems to work once
僅在滾動百分比一次后在頁面加載時顯示Bootstrap模態
[英]Show Bootstrap modal on page load after scrolled percentage only once
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.