点击按钮弹出表单对话框带透明遮罩

使用模态对话框来请求用户在一个多步骤过程中输入数据。在内容区域嵌入 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



阅读更多
换一批

没有更多推荐了,返回首页