How to use overlay dialog from jQuery for feedback form

StackOverflow https://stackoverflow.com/questions/20399811

سؤال

I'm trying to create a dialog (on click) for feedback. I've tried simple things first. Here's the fiddle

$("#feed_win").dialog({
    autoOpen:false;
});


$("#feedback").click( function() {
    $( "#feed_win" ).dialog( "open" ); 
});

But every time on load the dialog contains are shown before the button click event. Any help will be useful.

So, now i tried this.

<head>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    <script type="text/javascript">

    $("#feedback").button().click(function() {
          $("#feed_win").dialog("open");
        });

        $("#feed_win").dialog({
        autoOpen: false,
        modal: true,
        height: 300,
        width: 400
    });
    </script>
    </head>
    <body>
    <button id="feedback">Delete profile</button>

          <div id="feed_win">
            <h2>This is feedback form</h2>
            <p>You can add your feedback here</p>
        </div>
    </body>

But the dialog div is displayed on page load. why? It should be displayed after clicking button.

هل كانت مفيدة؟

المحلول

You need to include jQuery UI script in the head: 

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Here is fiddle: DEMO

Everything else you wrote is good, just add that line

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top