How to use overlay dialog from jQuery for feedback form

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

Domanda

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.

È stato utile?

Soluzione

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

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top