1. 程式人生 > >點選按鈕彈出表單對話方塊帶透明遮罩

點選按鈕彈出表單對話方塊帶透明遮罩

使用模態對話方塊來請求使用者在一個多步驟過程中輸入資料。在內容區域嵌入 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