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中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jQuery实现简单的抽奖游戏
May 05 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
jquery实现下载图片功能
Jul 18 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
jQuery实现鼠标滑动切换图片
May 27 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
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
深入PHP运行环境配置的详解
2013/06/04 PHP
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
python实现自动重启本程序的方法
2015/07/09 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
Python读取word文本操作详解
2018/01/22 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
Python函数生成器原理及使用详解
2020/03/12 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
abstract class和interface有什么区别
2013/08/04 面试题
党的群众路线批评与自我批评范文
2014/10/16 职场文书
小学感恩节活动总结
2015/03/24 职场文书
报案材料怎么写
2015/05/25 职场文书
详解MySQL的半同步
2021/04/22 MySQL
详解Node.js如何处理ES6模块
2021/05/15 Javascript