jQuery插件artDialog.js使用与关闭方法示例


Posted in jQuery onOctober 09, 2017

本文实例讲述了jQuery插件artDialog.js使用与关闭方法。分享给大家供大家参考,具体如下:

子窗口关闭artdialog终极解决方案:

window.parent.window.art.dialog({ id: 'qin123' }).close();
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>art</title>
 <link id="artDialogSkin" href="skins/default.css" rel="external nofollow" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="artDialog.js"></script>
<script type="text/javascript" src="plugins/iframeTools.js"></script> <!-- 对iframe的新工具 -->
</head>
<body >
<script type="text/javascript">
 function a(){
    art.dialog({content:'hello world!历史'})
    }
 function b(){
  art.dialog(
  {
   content:'欢迎你来到对话框世界!',
   lock:true,
   style:'succeed noClose'
  },
  function(){
   alert('你点了确定'); //不管点了确定还是取消默认都会关闭artdialog,除非在这里面返回false
  },
  function(){
   alert('你点了取消');
  }
     );
    }
 function c(){
 art.dialog(
 {
 title:'图片查看',
 fixed:true,
  content:'<img width="817" height="479" src="butterfly.jpg" />'
     });
 //return false;
 };
 function d(){
 // art.dialog({title:'dialog内嵌iframe', iframe:'http://www.baidu.com', width:'900', height:'500'});
 //已经没有了直接的iframe属性 通过下面的方式内嵌iframe 第二种效果不佳
 art.dialog.open("http://www.baidu.com", {width: 320, height: 400});
 // art.dialog({title:'dialog内嵌iframe', width:'900px',height:'500px', content:"<iframe align='right' src='http://www.baidu.com' width:'100%' height:'100%' />"});
 return false;
 };
 function e(){
 art.dialog(
 {
 title:'动画',
 fixed:true,
  content:'<embed src="ddd.rm" type="audio/x-pn-realaudio-plugin" autostart="true" width="420" height="363"></embed>'
     });
 }; //播放avi总是只有声音,没有画面,哎!
function f(){
 art.dialog({content:'你人品稳定么?', fixed:true, yesText:'我很稳定', style:'confirm', id:'bnt4_test'},
 function(){
   art.dialog({id:'bnt4_test'}).content('你骗人!');
   return false;//这样对话框才不会关闭
  },
  function(){alert('你是坏人');}//按右上角的叉关闭对话框也会执行这个函数
  );
 };
 function g(){
 art.dialog({mouse:true, id:'dg_test34243', content:'您收到 <strong>2</strong> 条消息',left:'right',width:'15em', top:'bottom', fixed:true});
 };
 function h(){
 art.dialog({id:'dg_test34243'}).close();
 };
 function i(){
  var _this = document.getElementById('btn7');
  if (document.getElementById('menu_4834783')) {//如果已经打开了对话框,按这个按钮还能把它关闭
  art.dialog({id:'menu_4834783'}).close();
  _this.innerHTML = '弹出菜单'; //button上显示的内容
  return;
  };
 art.dialog({id:'menu_4834783', title:'菜单', content:'请输入:<input style="width:200px;" id="M_dfd" type="text" value="hello world!" />',
  button:[{name:'确定',callback:function(){
    var a=document.getElementById('M_dfd').value;
    art.dialog({content:a, lock:true, time:1});
    }
  },
  {name:'关闭我',callback:function(){_this.innerHTML = '弹出菜单';}}
  ]
  }
  );
 _this.innerHTML = '关闭菜单';
 return false;
 };
 </script>
<input type="button" style="width: 100px" onClick="a()" value="最简单的对话框"/><br/>
<button id="btn0" onClick="b()">基本示例</button><br/>
<button id="btn1" onClick="c()">显示图片</button><br/>
<button id="btn2" onClick="d()">外部页面</button><br/>
<button id="btn3" onClick="e()">视频</button><br/>
<button id="btn4" onClick="f()">询问</button><br/>
<button id="btn5" onClick="g()">广告</button>
<button id="btn6" onClick="h()">关闭</button><br/>
<button id="btn7" onClick="i()">弹出菜单</button><br/>
</body>
</html>

artDialog_v4.1.7点击此处本站下载

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
jQuery 动态粒子效果示例代码
Jul 07 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
jQuery+ajax实现用户登录验证
Sep 13 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
jQuery实现html双向绑定功能示例
Oct 09 #jQuery
jqueryUI tab标签页代码分享
Oct 09 #jQuery
jQuery ajax调用webservice注意事项
Oct 08 #jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 #jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 #jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 #jQuery
jQuery选择器之子元素过滤选择器
Sep 28 #jQuery
You might like
php面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
DIV菜单层实现代码
2010/11/19 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
2013/08/16 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
JavaScript获取ul中li个数的方法
2017/02/13 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
python实现异步回调机制代码分享
2014/01/10 Python
Python脚本实现虾米网签到功能
2016/04/12 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
matplotlib实现区域颜色填充
2019/03/18 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
python实现双人五子棋(终端版)
2020/12/30 Python
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
HTML5文档结构标签
2017/04/21 HTML / CSS
小学生爱国演讲稿
2014/04/25 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
2014年除四害工作总结
2014/12/06 职场文书
介绍信的格式
2015/01/30 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书
Python初识逻辑与if语句及用法大全
2021/08/07 Python