點選按鈕彈出表單對話方塊帶透明遮罩
阿新 • • 發佈:2019-02-08
使用模態對話方塊來請求使用者在一個多步驟過程中輸入資料。在內容區域嵌入 form 標記,設定 modal
選項為
true,並通過 buttons
選項來指定主要的和次要的使用者動作
1. 按鈕
<input class="primary-btn" type="button" onclick="aa()" value="點我" />
2. 用於顯示彈窗視窗的div
<div id="aa" title="名稱" align="center">
<form action="" id="nameform">
<label>名稱:</label><input type="text" id="name1">
</form>
</div>
3. 使用 Jquery設定<script type="text/javascript">
function aa() {
$(function() {
var name1 = $("#name1")
$('#aa').dialog({
height:300,
width:400,
modal:true, //是否使用模式,為true時背景半透明不能修改的效果
buttons:{
"確認":function () {
var bValid = true;
if ( bValid ) {
alert(name1.val());
}
$(this).dialog("close");
},
"取消":function () {
$(this).dialog("close");
}
}
});
})
}
</script>
http://www.runoob.com/try/try.php?filename=jqueryui-example-dialog-modal-form