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

来源：互联网发布：莫宁06年总决赛数据编辑：程序博客网时间：2024/04/30 12:52

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

1 0