0

我想显示一个模态框。这可能吗？我有下面的代码显示我通常如何生成文本框等。

$(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…&lt;/p></div>');

//Excecute new modal?//

counter++;
});
});

4

2 回答 2

2

该解决方案基于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…&lt;/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>
于 2013-10-07T16:12:58.620 回答
1

我不确定“执行新模式？”是什么意思？

但这里有一些提示：

用这个：

$(".thing").click(function() {

或者

function GenerateModal () {...}
$(".thing").click(GenerateModal);

这也是可能的：

var newModal = $('<div attr="var" attr="var" attr="var" />')

或者也 .attr() 作为数组

var newModal = $('<div/>').attr({"attr":"var",...})
于 2013-10-07T13:15:07.567 回答