jQuery插件--dialog效果

最新推荐文章于 2022-03-23 22:15:52 发布

duoduo220

最新推荐文章于 2022-03-23 22:15:52 发布

阅读量1.4k

点赞数

分类专栏： jquery 文章标签： jquery插件 function javascript dialog xhtml class

本文链接：https://blog.csdn.net/wo1354691371/article/details/7404172

版权

jquery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!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 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>
<link type="text/css" href="./css/jquery-ui-1.8.18.custom.css" rel="stylesheet">
<script type="text/javascript" language="javascript">
    //当窗体加载完毕的时候触发该匿名函数
    //$(document)//把dom对象转换成jquery对象
//$(document).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:true, //是否可以拖动效果 true可以 false 不可以
    closeOnEscape:false ,//是否使用esc键退出对话框默认值为true
    title:"天际用户操作界面",
//对话框的标题
            position:"top",//对话框弹出的位置默认center
   width:600 ,//对话框的宽度
   height:300,
   resizable:false, //是否可以改变尺寸的操作默认为true
   zIndex:6, //层叠效果
   drag:function(event,ui){
    //
    }
    });
   //触发连接的事件，当你点击链接打开一个对话框
  $("#dialog_link").click(function (){
   $("#dialog").dialog("open");//open参数作用打开对话框
   });
  //获取设置的options中的参数值
  var modalValue=$("#dialog").dialog("options","modal");
  //alert(modalValue);
  //重新设置属性
  $("#dialog").dialog("options","modal",false);


    });

</script>
<style>
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
</style>
</head>

<body>

<h1>模拟dialog效果</h1>

<a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a>

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

</body>
</html>

效果图：

duoduo220

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery插件--dialog效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档 //当窗体加载完毕的时候触发该匿名函数 //$(document)//把dom对象转换成jquery对象 //$(document).ready(funct
复制链接

扫一扫

专栏目录