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插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 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
我的论坛源代码(二)
2006/10/09 PHP
php中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
php curl发送请求实例方法
2019/08/01 PHP
javascript tips提示框组件实现代码
2010/11/19 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
nodejs中安装ghost出错的原因及解决方法
2017/10/23 NodeJs
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
[01:47]2018年度DOTA2最佳教练-完美盛典
2018/12/16 DOTA
python使用any判断一个对象是否为空的方法
2014/11/19 Python
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
详解Python利用random生成一个列表内的随机数
2019/08/21 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
python 基于wx实现音乐播放
2020/11/24 Python
python如何实现递归转非递归
2021/02/25 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
自我鉴定四大框架
2014/01/17 职场文书
医师定期考核实施方案
2014/05/07 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
golang 实现时间戳和时间的转化
2021/05/07 Golang
使用CSS实现音波加载效果
2023/05/07 HTML / CSS