模态弹出窗口在jQuery中不起作用

Question

I have a submit button in a form ex:

<div>
<form method = 'POST' action="#">
<input type="submit" class="btn btn-success myDialog" value="buy now"/>
</form>
</div>

I need to show pop-up dialog box when submit event is raised. I tried somthing like this

in html

<div class="dialog">hello dialog box</div>

in .js file

$( ".myDialog" ).click(function() {
   alert();// alert is working
  $( ".dialog" ).dialog({
  autoOpen: false,
  show: {
    effect: "blind",
    },
  hide: {
    effect: "explode",
       }
   });
});

for me the above code is not working even I tried dialog("open") but no use, can anyone help me on this.

Answer 1

You will need to set autoOpen to true :

  $(".dialog").dialog({
    autoOpen: true, // <-- set to true, which is default
    show: {
      ...
    ...
  });

You should also change from a click event on the button to a submit event on the form:

$(".myDialog").closest("form").on("submit", function() {
  $(".dialog").dialog({
    show: {
      effect: "blind",
    },
    hide: {
      effect: "explode",
    }
  });
});

Alternative you can open it later with:

$(".dialog").dialog("open");

Answer 2

Try this..

$(".myDialog").click(function() {
  $(".dialog").dialog({
    show: {
      effect: "blind"
    },
    hide: {
      effect: "explode"
    }
  });
});

 $(".myDialog").click(function() { $(".dialog").dialog({ show: { effect: "blind" }, hide: { effect: "explode" } }); }); 

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.5/css/bootstrap.min.css" /> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <button class="myDialog">open the dialog</button> <div class="dialog" title="Dialog Title" style="display: none">hello dialog box</div> 

Answer 3

<input type="button" class="btn btn-success myDialog" value="buy now"/>

Change the type of an input box. Use "button" instead of "submit" and try.

Answer 4

Use this.

$( ".myDialog" ).click(function() {
  $( ".dialog" ).dialog({
  show: {
    effect: "blind",
    },
  hide: {
    effect: "explode",
       }
   });
});

and change type="submit" to type="button"

<input type="buttom" class="btn btn-success myDialog" value="buy now"/>

Answer 5

This piece of code works.Change the input type from submit to button.

 $(function() { $( ".dialog" ).dialog({ autoOpen: false, show: { effect: "blind", }, hide: { effect: "explode", } }); $( ".myDialog" ).click(function(e) { $(".dialog").dialog('open'); }); }) 

 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" /> <div> <form method = 'POST' action="#"> <input type="button" class="btn btn-success myDialog" value="buy now"/> </form> </div> <div class="dialog" hidden="hidden">hello dialog box</div>