Fatal编程技术网

Javascript jquery对话框

javascript jquery

Javascript jquery对话框,javascript,jquery,dialog,modal-dialog,Javascript,Jquery,Dialog,Modal Dialog,我有下面的jquery代码，我已经按照我的要求定制了它，但是有一些问题。首先，用户单击“单击此处”不会显示对话框。当用户单击“关闭”时，对话框不会消失。非常感谢你的帮助 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Dialog - Basic modal</title&

我有下面的jquery代码，我已经按照我的要求定制了它，但是有一些问题。首先，用户单击“单击此处”不会显示对话框。当用户单击“关闭”时，对话框不会消失。非常感谢你的帮助

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>jQuery UI Dialog - Basic modal</title>
        <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
        <script src="../../jquery-1.5.1.js">
</script>
        <script src="../../external/jquery.bgiframe-2.1.2.js">
</script>
        <script src="../../ui/jquery.ui.core.js">
</script>
        <script src="../../ui/jquery.ui.widget.js">
</script>
        <script src="../../ui/jquery.ui.mouse.js">
</script>
        <script src="../../ui/jquery.ui.draggable.js">
</script>
        <script src="../../ui/jquery.ui.position.js">
</script>
        <script src="../../ui/jquery.ui.resizable.js">
</script>
        <script src="../../ui/jquery.ui.dialog.js">
</script>
        <link rel="stylesheet" href="../demos.css">
        <script>
$(function() {
        // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
        $("#clickHere").onclick(function(){
                $( "#dialog-modal" ).dialog({
            height: 140,
            modal: true,

        });

});



        $("#close").onclick(function(){
            $("dialog-modal").destroy();
        })


        $( "#dialog-modal, #close" ).dialog({ resizable: false });
            $("#dialog-modal").dialog({autoOpen: false});
            $( "#dialog-modal" ).dialog({ closeOnEscape: false });


       $( "#close" ).dialog({ modal: false });


    });


    </script>
    </head>
    <body>

        <div class="demo">
        <div id="dialog-modal" title="Basic modal dialog" style="display:none">
                <p>
                    Adding the modal overlay screen makes the dialog look more
                    prominent because it dims out the page content.
                </p>
                <a id="close" href="">Close</a>
            </div>

            <a href="#" id="clickHere">Click here</a>


            <!-- Sample page content to illustrate the layering of the dialog -->
            <div class="hiddenInViewSource" style="padding: 20px;">
                <p>
                    Sed vel diam id libero
                    <a href="http://example.com">rutrum convallis</a>. Donec aliquet
                    leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum,
                    enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet
                    auctor elit eros a lectus.
                </p>
                <form>
                    <input value="text input" />
                    <br />
                    <input type="checkbox" />
                    checkbox
                    <br />
                    <input type="radio" />
                    radio
                    <br />
                    <select>
                        <option>
                            select
                        </option>
                    </select>
                    <br />
                    <br />
                    <textarea>textarea</textarea>
                    <br />
                </form>
            </div>
            <!-- End sample page content -->

        </div>
        <!-- End demo -->


<!--        <div id="dd" class="demo-description" style="display: none;">

            <p>
                A modal dialog prevents the user from interacting with the rest of
                the page until it is closed.
            </p>
            <a href="#" id="close">Close</a>
        </div> --> 
        <!-- End demo-description -->

    </body>
</html>
只需单击，而不是单击，例如：

$("#clickHere").click[...]
除此之外，close元素可能还不存在，因此您可以绑定到$close，但请先尝试按照上面的建议更改click方法。

使用.click而不是.onclick

您可能也缺少一个散列？

首先不要使用销毁，因为它有问题 如果要添加新内容，请更改对话框的内容，仅此而已

第二，建立你的对话

$( "#dialog-modal" ).dialog({
    autoOpen: false,
    height: 140,
    modal: true
});
然后打开对话框

$("#clickHere").click(function(){
    $( "#dialog-modal" ).dialog('open');
});

$("#close").click(function(){
    $( "#dialog-modal" ).dialog('close');
});
然后关闭对话框

$("#clickHere").click(function(){
    $( "#dialog-modal" ).dialog('open');
});

$("#close").click(function(){
    $( "#dialog-modal" ).dialog('close');
});
请看

wow，有很多加载的s:D与您的问题无关，但是我可以建议您构建一个定制的jQueryUI JS文件，只包含您需要的内容吗？这些都在我的jQueryEah提供的演示中，事实上我也想到了这一点。无论如何，在生产环境中，最好将它们合并到一个文件中。这是你将来可能需要注意的事情是的。谢谢你的提示。@Jay怎么回事，这不再是正确的答案了？