3、模拟Dialog效果
js效果
- <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" />
- <script language="javascript" type="text/javascript" src="./js/jquery-1.7.1.min.js">
- </script>
- <script language="javascript" type="text/javascript" src="./js/jquery-ui-1.8.18.custom.min.js"></script>
- <script language="javascript" type="text/javascript">
- //当窗体加载完毕时候 触发该匿名函数
- //$(document) //dom对象转化为jquery对象
- //.ready(function(){})
- $(function(){
- $("#dialog").dialog({
- autoOpen:false, //设置对话框打开的方式 不是自动打开
- show:"blind", //打开时动画效果
- hide:"explode", //关闭时的动画效果
- modal:true, //遮罩效果
- /* buttons:{
- "确定":function(){
- $(this).dialog("close"); //关闭对话框
- },
- "取消":function(){
- alert("取消的操作");
- }
- }, */
- buttons:[
- {text:"ok",
- click:function(){
- $(this).dialog("close");
- }
- },
- {text:"取消",
- click:function(){
- $(this).dialog("close");
- }
- }
- ],
- //draggable:false, //是否可以拖动的效果
- closeOnEscape:false,//是否采用esc键退出对话框
- title:"添加用户 操作界面",
- position:"top", //对话框弹出位置 可以使top left right center bottom 默认值是center
- width:200,
- hight:200,
- resizable:false, //是否可以改变的操作 false 则不可以改变尺寸
- zIndex:6,
- //drag:function(event,ui){
- // $("#dialog").html(111)//可以测试出拖拽效果
- // }
- })
- //触发连接的事件 当你点击连接 打开一个对话框
- $("#dialog_link").click(function(){
- $("#dialog").dialog("open");
- });
- //怎样获取 option中的参数值
- var modalValue=$("#dialog").dialog("option","model");
- //alert(modalValue)
- //怎样设置 option中的参数值
- $("#dialog").dialog("option","model",false);
- })
- </script>
html格式
- <body>
- <h1>模拟Dialog效果</h1>
- <!--c创建一个链接-->
- <a href="#" id="dialog_link" class="ui-state-default ui-corner-all" ><span class=""></span>Open Dialog</a>
- </div>
- <!-- div 对话框 $("#dialog").dialog; 他就成为一个对话框 在页面中就会隐藏 -->
- <div id="dialog" title="h1!">
- hello!
- </div>
实际效果图例: