jQuery UI Dialog常用的参数有:
1、autoOpen:默认true,即dialog方法创建就显示对话框
2、buttons:默认无,用于设置显示的按钮,可以是JSON和Array形式:
{"确定":function(){},"取消":function(){}}
[{text:"确定", click: function(){}},{text:"取消",click:function(){}}]
3、modal:默认false,是否模态对话框,如果设置为true则会创建一个遮罩层把页面其他元素遮住
4、title:标题
5、draggable:是否可手动,默认true
6、resizable:是否可调整大小,默认true
7、width:宽度,默认300
8、height:高度,默认"auto"
其他一些不太常用的参数:
1、closeOnEscape:默认true,按esc键关闭对话框
2、show:打开对话框的动画效果
3、hide:关闭对话框的动画效果
4、position:对话框显示的位置,默认"center",可以设置成字符串或数组:
'center', 'left', 'right', 'top', 'bottom'
['right','top'],通过上面的几个字符串组合(x,y)
[350,100],绝对的数值(x,y)
5、minWidth:默认150,最小宽度
6、minHeight:默认150,最小高度
使用方法:
$("...").dialog({
title: "标题",
//...更多参数
});
主要方法
jQuery UI Dialog提供了一些方法来控制对话框,仅列出常用的:
open:打开对话框
close:关闭对话框(通过close不会销毁,还能继续使用)
destroy:销毁对话框
option:设置参数,即前面列出的参数
使用的时候作为dialog方法的参数:
复制代码 代码如下:
var dlg = $("...").dialog({
//...各种参数
});
dlg.dialog("option", { title: "标题" }); // 设置参数
dlg.dialog("open"); // 使用open方法打开对话框
主要事件
jQuery UI Dialog提供了一些事件,比如打开、关闭对话框的时候做一些额外的事情:
open:打开时
close:关闭时
create:创建时
resize:调整大小时
drag:拖动时
使用方法同参数的使用方法,比如在打开时隐藏关闭按钮:
复制代码 代码如下:
$("...").dialog({
//...各种参数
open: function(event, ui) {
$(".ui-dialog-titlebar-close", $(this).parent()).hide();
}
});
JAVASCRIPT:
<script type="text/javascript"> $(function () { //hover states on the static widgets $('#dialog_link, ul#icons li').hover( function () { $(this).addClass('ui-state-hover'); }, function () { $(this).removeClass('ui-state-hover'); } ); //初始化对话框 $("#dialog").dialog ({ autoOpen: false, 600, modal: true, resizable: false, buttons: { "Login": function () { $.ajax({ type: 'post', url: '/User/Login', data: $('form').serialize(), //序列化对象参数 success:function(data){ $(this).dialog("close"); location.href = "/User/Testing"; } }); }, "Cancel": function () { $(this).dialog("close"); } } }); //打开对话框 $("#dialog_link").click(function () { $("#dialog").dialog("open"); return false; }); }); </script>
VIEW:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- jquery dialog --> <h2 class="demoHeaders">Dialog</h2> <p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p> <div id="dialog" title="LOGIN"> @using (Html.BeginForm()) { @Html.EditorFor(model => model.UserName) <br /> @Html.PasswordFor(model => model.Password) <br /> @Html.TextBoxFor(model => model.VerificationCode) <img id="verificationcode" alt="" src="@Url.Action("VerificationCode", "User")" /> <a id="trydifferent" style="cursor: pointer">换一张</a> } </div> <script type="text/javascript"> //刷新验证码 $("#trydifferent").click(function () { $("#verificationcode").attr("src", "/User/VerificationCode?" + new Date()); }) </script>