jQuery插件实现模拟dialogs效果实例（图片）

关注

原创最新推荐文章于 2023-06-28 14:36:07 发布 1k 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

<!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>模拟dialogs效果</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 rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.8.18.custom.css"/>

<script type="text/javascript">
//当窗体加载完毕的时候触发匿名函数
//$(document) //把document对象转换成jquery对象
//.ready(function(){})
$(function (){
//注册对话框
$("#dialog").dialog({
  autoOpen:false,//设置对话框的打开方式不是自动打开
  show:"blind", //打开时的动画效果
  hide:"explode",//关闭时的动画效果
  modal:true ,//遮罩效果 false非遮罩效果
  /*buttons:{//添加按钮的操作
  "确定":function(){
   $(this).dialog("close");//关闭对话框
  alert("提交");
  },
  "取消":function(){

  alert("取消操作");
  }

  },*/
  //buttons的写法的第二种方式
  buttons:[
  {
  text:"ok",
  click:function (){
  $(this).dialog("close"); //关闭对话框的操作

  }
  },
  {
   text:"取消",
   click:function(){
   $(this).dialog("close"); //关闭对话框的操作
   }
  }
  ],
  draggable:true,//是否可以拖动的效果 true可以拖动默认值为true false表示不可以拖动
  closeOnEscape:false,//是否采用esc键退出对话框如果为false则不采用 true采用默认值true
  title:"添加用户操作界面",//对话框的标题
  position:"top",//对话框弹出的位置可以使top left right center bottom 默认值center
  width:600,//对话框的高度

  heigth:200,//对话框的宽度
  resizeble:false ,//是否可以改变的操作 false则不可以改变 true可以改变默认值为true
  zIndex:6,
  drag:function(event,ui){
   //可以测试出对话框当期的坐标位置


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

  });
  //我怎么获取我设置的options的参数值
  var modalValue = $("#dialog").dialog("option","modal");
  alert(modalValue);
  //我怎么设置option的参数值
  $("#dialog").dialog("option","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>模拟dialogs效果</h1>
<a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span></span>Open Dialog</a>

<div id="dialog" title="hi">
Hello!
</div>
</body>
</html>