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

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

您需要添加单击事件侦听器以在单击

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>

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

这应该适合你..

if (confirm("your message")) {

    // your code

}

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

问题描述投票：0回答：3

3个回答

最新问题

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

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3