单击按钮时如何显示对话框

Question

单击“转发”按钮时，我想显示一个对话框。 此对话框必须使我能够继续或停留在同一页面上。 你是怎样做的？

下面是我的源代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jquery-ui.css">
        <script src="http://code.jquery.com/jquery.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
        <title>Test</title>
<script>
$(document).ready(function() {
    $( "#dialog" ).dialog({
      modal: true, 
      buttons: {
        "Yes": function() {
          $('#valid');
          //$( this ).dialog( "close" );
        },
        "No": function() {
          $( this ).dialog( "close" );
        }
      }
    });
  });

</script>
    </head>

    <body>
    <div id="dialog" title="Box">
    </div>
    <p>Welcome...!</p>
    <input type="file"/>
    <input type="submit" id="valider" name="valid" value="Forward"/>
    </body>
</html>

Answer 1

这应该为您工作。

if (confirm("your message")) {

    // your code

}

Answer 2

首先，您需要添加一个<form>元素。 然后添加分配ID，目标文件和onsubmit函数。 我们将编写return firstModal() 。

让我们创建firstModal() ：使用jQuery UI中的.dialog ，我们创建具有两个选项的模式：一个Close和另一个Send 。 然后，我们将第一个链接到$(this).dialog("close")以关闭对话框，另一个链接到document.getElementById("myForm").submit() ，它可以将HTML表单提交到在其中设置的目标文件action 。

这是完整的工作代码：

您可以创建两个模式框：一个用于初始输入，然后另一个用于确认：

 let confirmFormDialog = function(form) { $("#dialog").dialog({ modal: true, buttons: { Send: function() { document.getElementById("myForm").submit(); }, Close: function() { $(this).dialog("close"); } } }); return false; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <div id="dialog" title="Box"></div> <p>Welcome...!</p> <form id="myForm" onsubmit="return confirmFormDialog()" action="targetFile.php"> <input type="file" /> <input type="submit" id="valider" name="valid" value="Forward" /> </form>

使用这种技术，我们需要确保confirmFormDialog()返回false 。 这样，当单击输入按钮时，HTML表单不会提交。 通过删除此默认行为，我们决定何时使用.submit()提交表单。

Answer 3

您需要添加单击事件侦听器以在单击“ Forward按钮时显示对话框

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <div id="dialog" title="Box"></div> <p>Welcome...!</p> <input type="file" /> <input type="submit" id="valider" name="valid" value="Forward" /> <script type="text/javascript"> $(document).ready(function() { document.getElementById("valider").addEventListener("click",function(){ $("#dialog").dialog({ modal: true, buttons: { Yes: function() { $( this ).dialog( "close" ); }, No: function() { console.log('clicked no'); } } }); }); }); </script>

单击按钮时如何显示对话框

问题描述

3 个解决方案

解决方案1
0 2017-08-23 11:50:06

解决方案2
0 2017-08-23 11:50:34

解决方案3
0 2017-08-23 12:06:37

单击按钮时如何显示对话框

问题描述

3 个解决方案

解决方案1 0 2017-08-23 11:50:06

解决方案2 0 2017-08-23 11:50:34

解决方案3 0 2017-08-23 12:06:37

解决方案1
0 2017-08-23 11:50:06

解决方案2
0 2017-08-23 11:50:34

解决方案3
0 2017-08-23 12:06:37