找回密码
 注册

QQ登录

只需一步,快速开始

查看: 1611|回复: 2

[求助] jQuery ui dialog相关问题

[复制链接]
发表于 2014-1-14 14:23:30 | 显示全部楼层 |阅读模式
我引用了dialog 弹出窗口, 但ui文档里只介绍一个页面只有1个窗口,如果我要多个窗口呢?

教程里是命名id的方式,复用率很低。 比如我有第一段文字上加了A连接,每个A连接都是不同的弹出内容。dialog貌似无法实现啊!!
  1. $(function() {
  2.     $( "#dialog-modal" ).dialog({
  3.       height: 140,
  4.       modal: true
  5.     });
  6.   });
复制代码
发表于 2014-1-14 14:35:12 | 显示全部楼层
不喜欢别人的弹窗权限开的不够大就自己做了一个。

demo:http://nimojs.github.io/popup/
源码:https://github.com/NimoJs/popup

支持队列弹出和立即弹出,支持多弹出。alert confirm prompt(prompt还支持验证)

以下参数均可修改,可自行组合出各种弹出效果。可以修改弹出框里面的任何内容。弹出后给弹出框内的元素通过popupOpen 绑定事件都可以。
  1. {
  2.                 index                :        false,                //false|Number 弹出框z-index值
  3.                 type                 :        'alert',        //String(alert|confirm|prompt) 弹出框类型
  4.                 title                  :        false,                //false|String 弹出框标题
  5.                 content         :        false,                //false|String 弹出框内容
  6.                 immediately :        false,                //boolean 是否立即弹出
  7.                 loopTime        :        300,                //Number 延迟弹出下一个弹出框
  8.                 autoClose        :        false,                //false|number 自动关闭时间
  9.                 html:{
  10.                         //        mask : false|String(html)        遮罩层html
  11.                         mask:'<div class="fnPopupMask"></div>',
  12.                         //        alert : String(html)        提示框html
  13.                         alert:'<div class="fnPopup">'+
  14.                                                 '<div class="hd">'+
  15.                                                         '<strong>JavaScript</strong><span class="cancel close">x</span>'+
  16.                                                 '</div>'+
  17.                                                 '<div class="bd">'+
  18.                                                         '<div class="content">'+
  19.                                                                 '提醒'+
  20.                                                         '</div>'+
  21.                                                         '<div class="fn">'+
  22.                                                                 '<span class="btn cancel">确认</span>'+
  23.                                                         '</div>'+
  24.                                                 '</div>'+
  25.                                         '</div>',
  26.                         //        confirm : String(html)        确认框html
  27.                         confirm:'<div class="fnPopup">'+
  28.                                                 '<div class="hd">'+
  29.                                                         '<strong>JavaScript</strong><span class="cancel">x</span>'+
  30.                                                 '</div>'+
  31.                                                 '<div class="bd">'+
  32.                                                         '<div class="content">'+
  33.                                                                 '您确定吗?'+
  34.                                                         '</div>'+
  35.                                                         '<div class="fn">'+
  36.                                                                 '<span class="btn affirm">确认</span><span class="btn cancel">取消</span>'+
  37.                                                         '</div>'+
  38.                                                 '</div>'+
  39.                                         '</div>',
  40.                         //        prompt : String(html)        表单框html
  41.                         prompt:'<div class="fnPopup">'+
  42.                                                 '<div class="hd">'+
  43.                                                         '<strong>JavaScript</strong><span class="cancel">x</span>'+
  44.                                                 '</div>'+
  45.                                                 '<div class="bd">'+
  46.                                                         '<div class="content">'+
  47.                                                                 '请输入内容<br /><input type="text" class="input-text" />'+
  48.                                                         '</div>'+
  49.                                                         '<div class="fn">'+
  50.                                                                 '<span class="btn affirm">确认</span><span class="btn cancel">取消</span>'+
  51.                                                         '</div>'+
  52.                                                 '</div>'+
  53.                                         '</div>'
  54.                 },
  55.                 //        eventElement : 触发事件和标题内容的选择器集合
  56.                 eventElement:{               
  57.                         titleText:'.hd strong',        //标题
  58.                         content:'.content',                //内容
  59.                         affirm:'.affirm',                //确认按钮
  60.                         cancel:'.cancel'                        //关闭按钮
  61.                 },
  62.                 //        fn : 事件函数和动画函数接口
  63.                 fn:{
  64.                         cancel:function(){                //取消
  65.                                
  66.                         },
  67.                         affirm:function(){                //确认

  68.                         },
  69.                         submit:function(){                //表单框确认事件
  70.                                 var $popupWrap=arguments[0].popupWrap;
  71.                                 var $inputs=$popupWrap.find('input');
  72.                                 if($.trim($inputs.val()).length==0){
  73.                                         var oTemp=new Popup();
  74.                                         oTemp.open({
  75.                                                 content:'表单内容为空,请输入内容',
  76.                                                 immediately:true                                               
  77.                                         })
  78.                                         return false;//返回false则什么也不做
  79.                                 }else{
  80.                                         /*        do something...
  81.                                         *        例如:
  82.                                         *        alert('你输入了'+$inputs.val())
  83.                                         */
  84.                                         return true;//返回true则关闭表单框
  85.                                 }
  86.                         },
  87.                         maskOpen:function(){                //遮罩层显示动画
  88.                                 var $mask=arguments[0].mask;
  89.                                 $mask.fadeIn(300);
  90.                         },
  91.                         maskClose:function(){                //遮罩层打开动画
  92.                                 var $mask=arguments[0].mask;
  93.                                 $mask.fadeOut(300);                               
  94.                         },
  95.                         popupOpen:function(){                ////弹出框打开动画
  96.                                 var $popupWrap=arguments[0].popupWrap;
  97.                                 $popupWrap.fadeIn(300);
  98.                         },
  99.                         popupClose:function(){                //弹出框关闭动画
  100.                                 var $popupWrap=arguments[0].popupWrap;                               
  101.                                 $popupWrap.fadeOut(300);                               
  102.                         }
  103.                 }
  104.         }
复制代码
回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-1-14 14:37:37 | 显示全部楼层
老大我是要基于dialog的扩展啊~
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )

GMT+8, 2021-1-22 06:01 , Processed in 0.057364 second(s), 7 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表