диалоговое окно jquery - PullRequest
Новая
       9

диалоговое окно jquery

0 голосов
/ 28 марта 2011

У меня есть приведенный ниже код 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>

Ответы [ 4 ]

2 голосов
/ 28 марта 2011

Это просто click (), а не onclick (), например: 

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

Кроме того, элемент #close может еще не существовать, поэтому вы можете привязать к $ ("# close"), но сначала попробуйте изменить метод click, как предложено выше.

0 голосов
/ 28 марта 2011

Во-первых, не используйте Уничтожить, у него есть проблемы, если вы хотите добавить новый контент, измените содержимое диалога, вот и все

, второй создайте свой диалог 

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

, затем откройтедиалог 

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

и закрытие диалога 

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

см. jsfiddle

0 голосов
/ 28 марта 2011 
$("#close").click(function(){
        $("dialog-modal").destroy();
    })

Вы, может быть, тоже пропустили хеш?

0 голосов
/ 28 марта 2011

Используйте .click() вместо .onclick(). 

$('#clickHere').click(function(){ /* BLAH */ });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...