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监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 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面向对象分析设计的61条军规小结
2010/07/17 PHP
使用PHP备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
php中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
php函数连续调用实例分析
2015/07/30 PHP
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
解读JavaScript中 For, While与递归的用法
2013/05/07 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
2016/11/10 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
使用Python操作excel文件的实例代码
2017/10/15 Python
keras的三种模型实现与区别说明
2020/07/03 Python
Python requests接口测试实现代码
2020/09/08 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
内部类的定义、种类以及优点
2013/10/16 面试题
市场营销专业个人自荐信格式
2013/09/21 职场文书
小程序后台PHP版本部署运行 LNMP+WNMP
2021/04/01 Servers
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL
SQL SERVER触发器详解
2022/02/24 SQL Server