Javascript 单击链接后单击“确定”“取消”对话框_Javascript_Jquery_Html

Javascript 单击链接后单击“确定”“取消”对话框

javascript jquery html

Javascript 单击链接后单击“确定”“取消”对话框,javascript,jquery,html,Javascript,Jquery,Html,我是jquery的初学者，不知道如何继续我的项目。我想做的是创建一个对话框，其中有两个按钮“确定”和“取消”，单击链接后会弹出。我有完整的工作示例，但问题是我不喜欢对话示例A。我也有很好的对话框示例B，但我不知道如何将其与链接集成。有人能帮我吗下面是代码示例A-完全工作但不好： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Usuwanie pro

我是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——一个漂亮的对话框，有两个按钮OK和Cancel，但是没有链接集成

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

我相信这并不太难，但我没有足够的知识来完成这项任务

提前感谢您的帮助

试试这个

$dialog-message.hide； $'.confirmation'。单击，函数E{ e、防止违约； $dialog-message.dialog{ 莫代尔：是的，按钮：{ Ok：功能{ $this.dialogclose； window.location.href=glowny.php？akcja=produkty； }, 取消：功能{ $this.dialogclose； } } }; }; Usuwanie produktu Wybrany produkt zostałpomyślnie usunięty z bazy danych。

Naciśnij OK aby kontynuować。

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

然后，如示例A所示，触发模态打开。只要单击元素就可以创建一个事件

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

下面是代码Snippest。 Usuwanie produktu $function{ $dialog-message.dialog{ 莫代尔：是的，自动打开：错误，按钮：{ Ok：功能{ $this.dialogclose； window.location.href=glowny.php？akcja=produkty； }, 取消：功能{ $this.dialogclose； } } }; $link.clickfunction{ $dialog-message.dialogopen； } };

点击我打开

Wybrany produkt zostałpomyślnie usunięty z bazy danych。

Naciśnij OK aby kontynuować。

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>

谢谢大家的重播和帮助。

我复制了html代码，并将jquery代码放在脚本部分——它部分工作，我的意思是对话框出现了，但里面没有消息。当我将消息添加到html部分时，对话框出现了预期的内容，但页面上出现了相同的内容。这是一个问题。我不知道怎么解决它。它看起来真的很棒！它起作用了。正是我需要的。谢谢。如果它帮助你提高投票率，并将其标记为正确，这样它也可以帮助其他人。我复制了代码，但我没有得到一个链接工作。对话框也没有出现。按F12打开开发工具。控制台选项卡中是否有任何错误消息？我复制粘贴并尝试各种浏览器chrom、ie、firefox，在我这方面我没有任何问题。