Question

我有以下jquery代码我已根据我的要求对其进行了定制，但是它有一些问题。首先，用户点击“CLick Here”，不显示对话框。当用户点击“关闭”时，对话框不会消失。所有帮助都非常感谢。

    <!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>

Answer 1

只是click（），而不是onclick（），例如：

$("#clickHere").click[...]

除此之外，＃close元素可能尚不存在，因此您可以绑定到$（“＃close”），但请尝试按照上面的建议更改click-method。

Answer 2

使用.click()代替.onclick()。

$('#clickHere').click(function(){ /* BLAH */ });

Answer 3

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

你在这里也错过了哈希？

Answer 4

首先不要使用破坏它有问题如果要添加新内容，请更改所有

对话框的内容

第二次构建对话框

$( "#dialog-modal" ).dialog({
    autoOpen: false,
    height: 140,
    modal: true
});

然后打开对话框

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

并关闭对话框

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

请参阅jsfiddle

jquery对话框

4 个答案: