javascript - 如何在链接点击时显示jquery对话框

Question

我希望在单击导航菜单中的特定链接时弹出一个带有确认信息的jquery。我有下面的代码，但弹出窗口没有出现，但弹出窗口上的信息显示在页面上其他页面内容。

HTML 链接

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

对话框内容

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

当我删除$( "#order").click({时作为jquery的一部分，它作为每个点击链接的弹出窗口，所以问题一定存在，但我无法解决。

Answer 1

点击前有调用对话框功能请检查以下代码

$(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>