Question

我是jquery的初学者，不知道如何进行我的项目。我想做的是创建一个带有两个按钮“确定”和“取消”的对话框，该对话框在单击链接后会弹出。我有一个完整的示例，但是问题是我不喜欢对话框（示例A）。我还有一个漂亮的对话框（示例B），但我不知道如何将其与链接集成。有人可以帮我吗？

这是代码示例A-可以正常运行，但效果不佳：（

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<title>Usuwanie produktu</title>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>




</script>

</head>
<body>


<a href="delete.php?id=22" class="confirmation">Link</a>

<script type="text/javascript">
    $('.confirmation').on('click', function () {
        return confirm('Czy jesteś pewien, że chcesz usunąć wybrany produkt?');
    });
</script>


</body>
</html>

这是代码示例B-具有两个按钮“确定”和“取消”的漂亮对话框，但没有链接集成。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<title>Usuwanie produktu</title>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
$( function() {
        $( "#dialog-message" ).dialog({
                modal: true,
                buttons: {
                        Ok: function() {
                        $( this ).dialog( "close" );
                        window.location.href = "glowny.php?akcja=produkty";
                        },
                        Cancel: function() {
                        $( this ).dialog( "close" );
                        }
                }
        });
});
</script>

</head>
<body>
<div id="dialog-message" title="Usuwanie produktu">
        <p>
                <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
                Wybrany produkt został pomyślnie usunięty z bazy danych.
        </p>
        <p>
                Naciśnij OK aby kontynuować.
        </p>
</div>

</body>
</html>

我确信这并不是很难，但是我不具备足够的知识来完成任务。

预先感谢您的帮助

Answer 1

尝试一下

%this works
%!PS-Adobe-1.0
/units (asdasd) def
/Times-Roman findfont 20 scalefont setfont
300 300 moveto units show
showpage

%this does not 
%!PS-Adobe-1.0
/units (asd)asd) def
/Times-Roman findfont 20 scalefont setfont
300 300 moveto units show
showpage

$("#dialog-message").hide();
$('.confirmation').on('click', function(e) {
  e.preventDefault();
  $("#dialog-message").dialog({
    modal: true,
    buttons: {
      Ok: function() {
        $(this).dialog("close");
        window.location.href = "glowny.php?akcja=produkty";
      },
      Cancel: function() {
        $(this).dialog("close");
      }
    }
  });
});

Answer 2

您已接近目标。示例B中的对话框需要将autoOpen属性设置为false。加载文档时，它将阻止对话框打开。

然后像示例A一样，触发模式打开。只需点击该元素即可创建一个事件。

  $("#link").click(function() {
        $("#dialog-message").dialog("open");
      })

下面的代码摘录。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />

  <title>Usuwanie produktu</title>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <script>
    $(function() {
      $("#dialog-message").dialog({
        modal: true,
        autoOpen: false,
        buttons: {
          Ok: function() {
            $(this).dialog("close");
            window.location.href = "glowny.php?akcja=produkty";
          },
          Cancel: function() {
            $(this).dialog("close");
          }
        }
      });
      $("#link").click(function() {
        $("#dialog-message").dialog("open");
      })

    });
  </script>

</head>

<body>
  <p id="link"> click on me to open</p>
  <div id="dialog-message" title="Usuwanie produktu">
    <p>
      <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span> Wybrany produkt został pomyślnie usunięty z bazy danych.
    </p>
    <p>
      Naciśnij OK aby kontynuować.
    </p>
  </div>

</body>

</html>

Answer 3

Ashay Mandwarya提供的解决方案对我来说很好。这是代码：

<!DOCTYPE html> <html>

<head> <meta charset="utf-8" /> <title>Usuwanie produktu</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head>

<body> <div id="dialog-message" title="Usuwanie produktu">
        <p>
        <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>Wybrany produkt został pomyślnie usunięty z bazy danych.
        </p>
        <p>
        Naciśnij OK aby kontynuować.
        </p> </div>

<a href="delete.php?id=22" class="confirmation">Link</a>

<script type="text/javascript">

        $("#dialog-message").hide();
        $('.confirmation').on('click', function(e) {
                e.preventDefault();
                $("#dialog-message").dialog({
                modal: true,
                buttons: {
                        Ok: function() {
                        $(this).dialog("close");
                        window.location.href = "glowny.php?akcja=produkty";
                        },
                        Cancel: function() {
                        $(this).dialog("close");
                        }
                }
        }); });

</script>


</body>

</html>

感谢大家的重播和帮助。

单击链接后，确定取消对话框

3 个答案: