How to make a pop up appear after pressing a button using Jquery UI

Asked

Viewed 1,818 times

0

I made a form with Jquery accordion and at the end a submit button. After pressing the button should appear a pop up message, but is giving error. My pop up appears when the page starts and this button is kind of useless because the pop up should come later. Someone can help me?

        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="https://resources/demos/style.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script> <!---  jQuery UI “Submit” button --->
        $( function() {
            $( ".widget input[type=submit], .widget a, .widget button" ).button();
            $( "button, input, a" ).click( function( event ) {
                event.preventDefault();
            });
        });
    </script>
    <!---  jQuery UI Dialog message --->
    <script>
        $( function() {
            $( "#dialog" ).dialog();
        });
    </script>


            <div class="widget">
                <input type="Submit" value="Submit"/>
            </div>
            <div id="dialog" title="Order Complete">
                    <p>Your order has been placed.</p>
            </div>
jquery jquery-ui

  • The question is a bit confusing. You could try to detail it better and add a visible example (using jsfiddle for example of the problem?

  • I believe that button() not a method. But I would like to see this whole part of the code to leave a better answer to the question.

  • ok I’ll try to put the code in a clearer way

  • But what I need eh: - to create a button using Jquery; - to create a dialog box(pop up) using Jquery; - and finally to make the pop up appear only when I click this button

  • I have obtained these functions from this site: https://jqueryui.com/button/

  • i do not know why the site does not allow me to put the body part in the question in a clean way. In this case the Divs are from the body part

Show 1 more comment

2 answers

0

The problem is that you do not call the function to show your popup in the button action. Try something like:

<script> <!---  jQuery UI “Submit” button --->
        $( function() {
            $( ".widget input[type=submit], .widget a, .widget button" ).button();
            $("#submit" ).click( function( event ) {
                event.preventDefault();
                $( "#dialog" ).dialog();
            });
        });
    </script>

  • Yes this worked, but how do I avoid pop up appear when I load the page? autoOpen: false;?

  • Just remove the second part of the code that starts after the <!--- jQuery UI Dialog message --->

  • yes both taking out and putting the autoOpen worked. thanks, but there is still a small detail that is bothering my eyes. Before I step on the knob underneath it the testo "Your order has been placed." gets sample. have to take it off and soh show when the pop up appears?

  • Eonardo... I checked here and an error occurred that I came across earlier. it happens that doing so you told me, no matter where I click on my page the pop up is appearing, even if I click on the index menu the pop up appears

  • Edited my answer. Please try again.

0


When using $( function() {, you are executing the instruction at the time of page ready and not when the button is clicked.

$( function() {
    $( "#dialog" ).dialog();
});

Follows the function to your problem: 

$(document).ready(function(){
    $("#submit").on("click", function(){
        $("#dialog").dialog();
    });
});
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


<div>
  <input id="submit" type="submit" value="submit"/>
</div>

<div id="dialog" title="Basic dialog" style="display:none;">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

  • I checked here and an error occurred that I came across earlier. it happens that doing so you told me, no matter where I click on my page the pop up is appearing, even if I click on the index menu the pop up appears

  • @Wagnergualberto Nop, the popup will only be displayed when you click on an element with the id Submit.

  • I agree, but I have no other id Ubmit on my page, I have already checked and that is not getting into my head

  • @Wagnergualberto Wagner, is an example code, you can adapt it to your need.

Browser other questions tagged jquery jquery-ui

You are not signed in. Login or sign up in order to post.