引导程序中的data-dismiss
无效。它正在另一个项目中工作,但不在此项目中。请告诉我我哪里出错了。
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
@Html.TextBoxFor(m => m.txtName)
<button type="submit" id="submit" data-toggle="modal" data-target="#myModal">Produce Page</button>
}
//My Modal
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
...
<div class="modal-header">
...
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary"><a href="~/MyHome/MyHome">Go to My Home</a></button>
</div>
</div>
答案 0 :(得分:1)
您可以尝试使用此代码段。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> @using (Html.BeginForm("Index", "Home", FormMethod.Post)) { @Html.TextBoxFor(m => m.txtName)
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> }
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
@Html.Partial("My partial View")
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
使用Pure Javascript的Bootstrap模式
(function() {
"use strict";
var Modal = function(el, options) {
var self = this;
this.el = document.querySelector(el);
this.options = options;
try {
var list = document.querySelectorAll('#' + this.el.id + ' [data-dismiss="modal"]');
for (var x = 0; x < list.length; x++) {
list[x].addEventListener('click', function(e) {
if (e) e.preventDefault();
self.hide();
});
}
} catch (e) {
console.log(e);
}
};
/**
* Methods
*/
Modal.prototype.show = function() {
var self = this;
// adding backdrop (transparent background) behind the modal
if (self.options.backdrop) {
var backdrop = document.getElementById('bs.backdrop');
if (backdrop === null) {
backdrop = document.createElement('div');
backdrop.id = "bs.backdrop";
backdrop.className = "modal-backdrop fade in";
document.body.appendChild(backdrop);
}
}
// show modal
this.el.classList.add('in');
this.el.style.display = 'block';
document.body.style.paddingRight = '13px';
document.body.classList.add('modal-open');
};
Modal.prototype.hide = function() {
var self = this;
// hide modal
this.el.classList.remove('in');
this.el.style.display = 'none';
document.body.style = '';
document.body.classList.remove('modal-open');
// removing backdrop
if (self.options.backdrop) {
var backdrop = document.getElementById('bs.backdrop');
if (backdrop !== null) document.body.removeChild(backdrop);
}
};
/* Event */
document.addEventListener('DOMContentLoaded', function() {
var m = new Modal('#MyModal', {
backdrop: true
});
document.getElementById('btn-open').addEventListener('click', function(e) {
if (e) e.preventDefault();
m.show();
});
});
})();
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> @using (Html.BeginForm("Index", "Home", FormMethod.Post)) { @Html.TextBoxFor(m => m.txtName)
<a href="#" id="btn-open" class="btn btn-info btn-lg">Click Me</a> }
<div id="MyModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>