單擊按鈕時如何顯示對話框
[英]How to display a dialog box when you click a button
問題描述
單擊“轉發”按鈕時，我想顯示一個對話框。 此對話框必須使我能夠繼續或停留在同一頁面上。 你是怎樣做的？
下面是我的源代碼：
<!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>
3 個解決方案
解決方案1
0 2017-08-23 11:50:06
這應該為您工作。
if (confirm("your message")) {
// your code
}
解決方案2
0 2017-08-23 11:50:34
首先，您需要添加一個<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()提交表單。
解決方案3
0 2017-08-23 12:06:37
您需要添加單擊事件偵聽器以在單擊“ 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>
按下刪除按鈕時如何在對話框中顯示角色名稱
[英]How to display the role name in the dialog box when Delete button is pressed
單擊按鈕時如何獲取javascript變量以顯示更改？
[英]How to get a javascript variable to display a change when you click a button?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.