jquery ui dialog弹出div层对话框

jquery ui弹出div层对话框,效果预览:http://keleyi.com/keleyi/phtml/jui/dialog/index.htm

以下是完整代码,保存到html文件,打开也可以预览效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery ui弹出div层对话框--柯乐义</title>
<link rel="stylesheet" href="http://keleyi.com/keleyi/pmedia/jquery/ui/1.10.3/css/smoothness/jquery-ui.min.css" /> 
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script>
<script src="http://keleyi.com/keleyi/pmedia/jquery/ui/1.10.3/js/jquery-ui-1.10.3.min.js" type="text/javascript"></script> 
<script type="text/javascript">
function keleyidialog() {
$("#dialog").dialog();
}
</script>
<style type="text/css">#dialog{display:none;}</style>
</head>
<body>

<div style="width:338px;height:100px;margin:10px auto;"><input type="button" onclick="keleyidialog()" value="点击我" />
<a href="http://keleyi.com/a/bjac/5939d3b2c920ff6d.htm" target="_blank">原文</a> <a href="http://keleyi.com/keleyi/phtml/jui/dialog/1.htm">无动画</a> <a href="http://keleyi.com/keleyi/phtml/jui/dialog/2.htm">动画</a>
<a href="http://keleyi.com/keleyi/phtml/jui/dialog/3.htm">redmond</a>
<a href="http://keleyi.com/keleyi/phtml/jui/dialog/4.htm">sunny</a>
<br />点击按钮弹出对话框
</div>
<div id="dialog" title="div层对话框">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
<p>柯乐义:这是一个弹出div层对话框,可用于显示信息。可以拖动和关闭这个弹出层,还可以改变它的大小。 </p>
</div>
</body>
</html>

 

还有多种样式可供选择,例如eggplant或者vader等。只需将上面代码中的smoothness换掉就eggplant、sunny、redmond或者vader可以了。例如vader:http://keleyi.com/keleyi/phtml/jui/dialog/2.htm
sunny:http://keleyi.com/keleyi/phtml/jui/dialog/4.htm


jquery ui的dialog方法,有着很强大的功能,比如把上面代码中的keleyidialog函数换成以下代码则有不同效果:http://keleyi.com/keleyi/phtml/jui/dialog/1.htm

代码:

function keleyidialog() {
$("#dialog").dialog({
resizable: false,
height: 240,
width: 400,
modal: true,
buttons: {
"确定": function () {
window.location.href = "http://keleyi.com";
},
"取消": function () {
$(this).dialog("close");
}
}
});
}
View Code keleyi.com

参数:

resizable:是否能够改变对话框的大小(true、false)
height: 对话框的高度(240)
width: 对话框宽度(400)
modal: 是否有遮罩层(true,false),如果为ture,则弹出对话框时,网页中除了弹出的对话框纸袋,其他元素都被遮罩层盖住,无法操作
buttons:在对话框上显示按钮,点击按钮会执行相应方法。
参考:http://keleyi.com/a/bjac/5aed2303707e30fa.htm

 

本文转载自柯乐义:http://keleyi.com/a/bjac/5939d3b2c920ff6d.htm

你可能感兴趣的:(jquery,UI)