CODEWITHSUNDEEP
javascriptjqueryhtml
subbu royal
subbu royal

Reputation: 624

Modal popup is not working in jquery

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.

Upvotes: 0

Views: 994

Answers (5)

Parvez Rahaman
Parvez Rahaman

Reputation: 4397

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>

Upvotes: 1

Shubham Khatri
Shubham Khatri

Reputation: 282160

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>

Upvotes: 0

phreakv6
phreakv6

Reputation: 2165

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"/>

Upvotes: 0

Andreas Louv
Andreas Louv

Reputation: 47127

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");

Upvotes: 1

Jogendra Yadav
Jogendra Yadav

Reputation: 11

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

Upvotes: 0

Related Questions