jquery学习模拟Dialog效果

最新推荐文章于 2024-11-12 15:47:14 发布

csdn-php-张黎

最新推荐文章于 2024-11-12 15:47:14 发布

阅读量1.4k

点赞数 1

文章标签： dialog jquery function stylesheet xhtml 作业

本文链接：https://blog.csdn.net/zl943588435/article/details/7403843

版权

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>效果</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />

<script type="text/javascript">
$(function(){
$("#dialog").dialog({
autoOpen:false, //设置对话框打开的方式不是自动打开
show:"blind", //打开时的动画效果
hide:"explode", //关闭时的动画效果
modal:true, //true遮罩效果 false非遮罩效果
/* //buttons的第一种方法
buttons:{
//添加按钮的操作
"确定":function(){
//alert("提交");
$(this).dialog("close"); //关闭对话框
},
"取消":function(){
//alert("确定取消吗");
$(this).dialog("close"); //关闭对话框

}
},*/
//buttons的第二种方法：
buttons:[
{
text:"ok",
click:function(){
$(this).dialog("close");
}
},{text:"取消",
click:function(){
$(this).dialog("close");
}
}
],

draggable:false, //true表示可以拖动（默认的），false不可以拖动
closeOnEscape:false, //是否采用esc键关闭对话框，false不采用。true采用，为默认的
title:"添加用户操作界面", //对话框的标题
position:"top", //对话框弹出的位置（top left right center bottom 默认值是center）
width:600, //对话框的宽度
height:300, //对话框的高度
resizable:false, //是否可以改变的操作 true可以改变尺寸，默认值为true
zIndex:6,

});
//触发连接的事件当你点击时连接打开一个对话
$("#dialog_link").click(function(){
$("#dialog").dialog("open"); //open参数作业打开对话框
});

});
</script>

<style>




</style>

</head>

<body>
<h1>模拟Dialog效果</h1>

<a href="#" id="dialog_link"><span class="ui-icon ui-icon-newwin"></span>open Dailog</a>



<div id="dialog" title="hi!">
hello!

</div>

</body>
</html>