我想显示一个模态框。这可能吗？ 我下面的代码显示了我通常如何生成文本框等。
$(document).ready(function(){
var counter = 1;
$(".thing").click(function GenerateModal () {
var newModal = $(document.createElement('div'))
.attr("id", 'myModal' + counter).attr("class", 'modal hide fade').attr("tabindex", '-1').attr("role", 'dialog').attr("aria-labelledby", 'myModalLabel').attr("aria-hidden", 'true');
newModal.after().html('<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">Modal header</h3></div><div class="modal-body"><p><img src="img/werk/logo.jpg" class="pull-right" alt=""><p>One fine body…</p></div>');
//Excecute new modal?//
counter++;
});
});
最佳答案
该解决方案基于http://www.webdesignerdepot.com/2012/04/techniques-for-creating-modal-windows/ 。要创建模式对话框，需要使用覆盖整个屏幕的 div“层”。
<!DOCTYPE html>
<html>
<head>
<title>Modal Window</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
var newModal;
function executeModal() {
$("#blind").attr("z-index", 9999).show();
$("#modalDivContainer").append(newModal).show();
}
function closeModal(count) {
$("#modalDivContainer").hide();
$("#myModal" + count).remove();
$("#blind").attr("z-index", 0).hide();
}
$(document).ready(function() {
var counter = 1;
$(".thing").click(function GenerateModal() {
newModal = $(document.createElement('div'))
.attr("id", 'myModal' + counter).attr("class", 'modal hide fade').attr("tabindex", '-1').attr("role", 'dialog').attr("aria-labelledby", 'myModalLabel').attr("aria-hidden", 'true');
newModal.after().html('<div class="modal-header"><button onclick="closeModal(' + counter + ')" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">Modal header</h3></div><div class="modal-body"><p><img src="img/werk/logo.jpg" class="pull-right" alt=""><p>One fine body…</p></div>');
executeModal();
counter++;
});
});
</script>
<style type="text/css">
.blind
{
z-index:0;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display: none;
background-color:#555;
}
.modalDivContainer {
z-index: 10000;
position:absolute;
top: 50%;
left: 50%;
width:400px;
height:300px;
margin-left:-200px;
margin-top:-150px;
display: none;
background-color:#ffffff;
}
</style>
</head>
<body>
<div class="blind" id="blind"></div>
<div class="modalDivContainer" id="modalDivContainer"></div>
<button class="thing">thing</button>
</body>
</html>
关于javascript - jquery生成模态框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19225571/