CODEWITHSUNDEEP
javascriptjquerydialogmodal-dialog
Jay
Jay

Reputation: 707

jquery dialog box

I have the below jquery code I have customized it as per my requirement but have some issues with it. Firstly the user clicks on "CLick Here" the dialog is not displayed. and when the user clicks on "close" the dialog doesnt disappear. All you help is highly appreciated.

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

Upvotes: 0

Views: 2817

Answers (4)

mcgrailm
mcgrailm

Reputation: 17640

first off don't use destroy it has problems if you want to add new content change the content of the dialog thats all

second build your dialog

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

then open the dialog

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

and close the dialog

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

see jsfiddle

Upvotes: 0

Andrew
Andrew

Reputation: 13853

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

you are missing a hash here maybe as well?

Upvotes: 0

Richard Neil Ilagan
Richard Neil Ilagan

Reputation: 14747

Use .click() instead of .onclick().

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

Upvotes: 0

jm_toball
jm_toball

Reputation: 1217

It is just click(), not onclick(), e.g:

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

Apart from that, the #close element might not yet exist, so you can bind to $("#close"), but try changing the click-method as suggested above first.

Upvotes: 2

Related Questions