Как отобразить 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");
    }
  }
});
});
} );

Когда я удаляю часть jquery $( "#order").click({, она работает как всплывающее окно для каждой нажатой ссылки,поэтому проблема должна быть, но я не могу ее решить.

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> 

Answer 2

1) сначала добавьте autoOpen: false в настройки диалогового окна, чтобы всплывающее окно не отображалось автоматически при загрузке страницы.

2) добавьте метод щелчка по вашей ссылке, который будет отображать всплывающее окно.

Смотрите эту скрипку: https://jsfiddle.net/4eo9w1cr/