|
基本的dialog：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 对话框（Dialog） - 默认功能</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="基本的对话框">
<p>这是一个默认的对话框，用于显示信息。对话框窗口可以移动，调整尺寸，默认可通过 'x' 图标关闭。</p>
</div>
</body>
</html>
为dialog打开和关闭加上特效动画：
effect: "clip", //可取值blind,clip,drop,explode,fold,puff,slide,scale,size,pulsate
例如：
<div id="dialog" title="Basic dialog">
<p>这是一个动画显示的对话框，用于显示信息。对话框窗口可以移动，调整尺寸，默认可通过 'x' 图标关闭。</p>
</div>
<button id="opener">打开对话框</button>
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
基本的模态：模态对话框防止用户与对话框以外的页面其他部分进行交互，直到对话框关闭为止。
添加模态覆盖屏幕，让对话框看起来更突出，因为它让页面上其他内容变暗。
<div id="dialog-confirm" title="清空回收站吗？"><p>这些项目将被永久删除，并且无法恢复。您确定吗？</p></div>
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
$("#bindContractDialog").dialog({
autoOpen:true,
height:400,
width:365,
resizable:false,
modal:true, //这里就是控制弹出为模态
buttons:{
"确定":function(){
//向后台提交数据
$.ajax({
async:false,
cache:true,
type: "POST",
data:{
goodsId:goodsId,
checker:checker,
checkAmount:checkAmount,
picture:checkPicture,
goodsNumber:goodsNumber
},
url: "goods_editGoods.do", //获取json数据
success: function(){
alert("绑定合同号成功");
},
error: function() {
alert("绑定合同号失败");
}
});
$(this).dialog("close");
},
"取消":function(){$(this).dialog("close");}
}
});
| 
转播
