jQuery实现弹出对话框~~~

原创 2012年03月28日 21:04:13

<!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="../../include/jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../include/jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" href="../../include/css/ui-lightness/jquery-ui-1.8.18.custom.css" />
<script>
 //当窗体加载完毕的时候,触发匿名函数
 //$(document)  把dom对象转换成jQuery对象
 //$(document).ready(function (){});
 $(function (){
  
  //注册对话框
  $("#dialog").dialog({
   //设置对话框打开的方式 不是自动打开
   autoOpen:false,
   show:"blind",
   hide:"explode",
   modal:true,
   /*buttons:{ //添加按钮操作
    "确定":function (){
      //alert("提交");
      $(this).dialog("close");
     },
    "取消":function (){
      alert("取消");
     }
    
    },*/
   buttons:[
    {
     text:"OK",
     click:function (){
      $(this).dialog("close");
     }
    },{
     text:"calcel",
     
     
     }
    ],
   //draggable:false, //是否可以拖动的效果 默认true
   closeOnEscape:false, //是否esc
   title:"添加用户操作界面", //对话框标题
   position:"top",//对话框弹出的位置 top left right center bottom 默认是center
   width:300, //对话框宽度
   height:200, //对话框高度
   resizable:false, //是否可以改变大小操作  默认true
   //zIndex:6,
   drag:function(event,ui){
    //alert("你拖拽,我执行");
    $("#dialog").html("我了歌曲");
    }
   
   }); 
  
  //触发连接的事件 当点击连接打开一个对话
  $("#dialog_link").click(function (){
   //open参数 作用:打开对话框
   $("#dialog").dialog("open");
   
  });
  //获取设置的options中的参数值
   var modalValue=$("#dialog").dialog("option","modal");
   //alert(modalValue);
   //设置options中的参数值 
    
    $("#dialog").dialog("option","modal",false);


 });
</script>
</head>

<body>

 <h1>模拟tabs效果</h1>
 <!--创建一个连接-->
 <a href="#" class="ui-state-default ui-corner-all" id="dialog_link"><span class="ui-icon ui-icon-newwin"></span>Open dialog</a>
   
    <!--div对话框 $("#dialog").dialog();它就成了一个对话框 在页面中就会隐藏-->
    <div id="dialog" title="hi">
     hello!
    </div>
   
</body>
</html>

很简单的jquery弹出对话框

弹出框 .dialog-mask{position:fixed;left:0;top:0;right:0;bottom:0;background:#000;filter:alpha...
  • robinhunan
  • robinhunan
  • 2017年04月18日 12:59
  • 810

jQuery 精简版弹出对话框层

原文地址:http://wange.im/jquery-dialog-layer.html 弹出对话框在一个网站中是相对比较常见的功能,无论是确认信息还是注册申请,都可能会用到弹出层。用 JS 来实...
  • johnstrive
  • johnstrive
  • 2014年12月18日 23:07
  • 1173

jQuery实现单击按钮遮罩弹出对话框(1)

看到网上一位大神的代码后,大概进行了注释,调试了一下页面
  • laixiaobailing
  • laixiaobailing
  • 2014年08月28日 19:47
  • 1652

结合jQuery的unload方法实现JS退出页面弹出对话框

http://www.rainweb.cn/article/113.html 注:经验证有效。 如果在退出页面时需要弹出对话框,提示用户将要退出页面,类似当设置某个功能时而没有保存...
  • zxygww
  • zxygww
  • 2015年08月13日 16:23
  • 1295

Jquery实现模态窗口—simplemodal

QQ邮箱里面的邮件删除,弹出确认对话框是不是很好看,是的,它看起来实现很复杂,其实不然,现在Jquery插件已经很方便的让你来实现这些功能,那就是我们的simplemodal插件。网上可以下载相应的插...
  • sad_hopedream
  • sad_hopedream
  • 2013年12月19日 23:08
  • 2601

js弹出框、对话框、提示框、弹窗总结

js弹出框、对话框、提示框、弹窗总结 一、JS的三种最常见的对话框 [javascript] view plaincopy //=...
  • anhuidelinger
  • anhuidelinger
  • 2013年11月29日 14:30
  • 408366

jquery 信息提示框对话框 div层实现

jquery 信息提示框对话框 div层实现
  • vaecnfeilong
  • vaecnfeilong
  • 2014年01月07日 16:59
  • 2078

简易jQuery对话框组件、弹窗插件

xyPop是一个轻巧且高度兼容的jQuery简易版插件,可让你的网页交互达到急速用户体验。 功能: 支持锁定屏幕(遮罩)、模拟alert和confirm、多窗口弹出、静止定位、支持四个方向定位(上/下...
  • xiaoyan_2015
  • xiaoyan_2015
  • 2016年01月27日 16:20
  • 2411

通过纯JS和css实现自定义弹出对话框

需求: 实现通过一个弹出对话框来选择下拉列表中对应值进行参数设置操作,及弹出对话框中需要有一个下拉列表输入和一个确定按钮即可,要求弹出对话框后,背部界面不能够操作或者被屏蔽灰掉。 思路: 1.开...
  • wuruixn
  • wuruixn
  • 2013年03月18日 13:58
  • 10885

jQuery弹出窗口完整代码

参考: http://www.cnblogs.com/jihua/archive/2012/10/08/2715175.html,  稍作整理如下: jQuery弹出窗口 .window...
  • zhulei632
  • zhulei632
  • 2015年01月08日 14:56
  • 4699
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery实现弹出对话框~~~
举报原因:
原因补充:

(最多只允许输入30个字)