CODEWITHSUNDEEP
javascriptjquery
CharlieT
CharlieT

Reputation: 414

How to display jquery dialog on link click

I would like to have a jquery pop up with confirmation info when clicking on a specific link in my navigation menu.I have the code below, but the popup does not appear, but the info on the popup display on the page among other page content.

HTML Link

<li><a href="#" id="order" target="_blank">Order </a></li>

Dialog content

<div id="dialog-confirm"> 
<div class="message">UI Content goes here</div> 
<div class="buttons"> 
</div>

jquery

 <script>
 $( function() {
 $( "#dialog-confirm" ).dialog({
   $( "#order").click({  
  resizable: true,
  height: "auto",
  width: 600,
  modal: true,
  buttons: {
    "Yes": function() {
      window.location.replace("https://link_here");
    },
    No: function() {
      window.location.replace("https://link_here");
    }
  }
});
});
} );

When I remove the $( "#order").click({ part of the jquery, it works as a popup for every link clicked, so the issue must be there but I am unable to solve.

Upvotes: 0

Views: 479

Answers (2)

jvk
jvk

Reputation: 2211

You have calling dialog function before click Please check below code

$(function(){
            $('#order').click(function(e){
                e.preventDefault();
                $( "#dialog-confirm" ).dialog({
                  resizable: true,
                  height: "auto",
                  width: 600,
                  modal: true,
                  buttons: {
                    "Yes": function() {
                      window.location.replace("https://link_here");
                    },
                    No: function() {
                      window.location.replace("https://link_here");
                    }
                  }
                });
            })
            
        })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://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" />
 <li><a href="#" id="order">Order </a></li>

<div id="dialog-confirm" style="display: none;"> 
<div class="message">UI Content goes here</div> 
<div class="buttons"> 
</div>

Upvotes: 2

Devtrix.net
Devtrix.net

Reputation: 763

1) add autoOpen: false to the dialog settings first, so popup won't be shown automatically on page load.

2) add click method on your link which will be showing the popup.

See this fiddle: https://jsfiddle.net/4eo9w1cr/

Upvotes: 0

Related Questions