hg888皇冠手机登录

模态对话框

六月 28th, 2019  |  www.hg888.com

这段代码在bs的1037行(- -这里是我的行数,我是直接在它的bs上改的,你的应该再往上一点点)顺便说下!function($){}(window.jQuery)这种写法是一种匿名函数的写法具体可以参见http://www.jb51.net/article/21948.htm;然后大家看这代码的第一行就是定义点击带有[data-toggle]=‘modal’]这样的参数的组件响应函数,第二行是将传递的当前对象封装为jquey,第三行是获得当前的超链接内容然后看第五行是设置参数option ,这里判断$target.data('modal')的值最初为undefined所以要用扩展的方式增加,扩展的第一个参数又使用了正则判断得到的href是不是#,不是则传递href的值也就能得到我们的url,剩下的就是拿到这个url后先以?分离utl正文和参数,然后将参数封装为json字符创,网上给出的用封装好的js对象将字符串处理为json貌似不对于是自己写,具体内容相信了解简单字符串处理的读者能看懂,不了解的就需要自己补补了。其实这样处理仅仅是为了兼容ie的效果,想ff这类的浏览器是不用做任何处理就可以使用bs的,天杀的ie你究竟要折磨多少开发者才满意。

代码:

模态对话框必须关闭手艺对后端操作。 模块对话框和窗口的界别是世代置顶。

兑现格局为: //创立模态你对话框
window.showModalDialog(sURL,vArguments,sFeatures)
//创制非模态对话框
window.showModelessDialog(sURL,vArguments,sFeatures)

 $("#feeds").load("feeds.php", {limit: 25}, function(){     alert("The last 25 entries in the feed have been loaded");   });

 

window.showModelessDialog(“url”,”向目的对话框传的值”,”窗口特征参数”)张开非模块对话框,不用关闭能够操作前面。

子窗口成立及父窗口与子窗口之间通讯:  
1、Javascript弹出子窗口 可以透过三种办法贯彻,上面介绍二种方法
(1)
通过window对象的open()方法,open()方法将会时有爆发三个新的window窗口对象
其用法为:
window.open(URL,windowName,parameters);
UENCOREL: 描述要张开的窗口的U科雷傲L地址,如何为空则不张开任何网页;
windowName:描述被张开的窗口的民称,能够动用’_top’、’_blank’等内建名称,这里的名目跟<a
href=”…” target=”…”>里的target属性是同一的。
parameters:描述被张开的窗口的参数值,恐怕说是样貌,其包含窗口的依次属性值,及要传播的参数值。
例如: 开辟四个 400 x 100 的绝望的窗口:
open(”,’_blank’,’width=400,height=100,menubar=no,toolbar=no,
location=no,directories=no,status=no,scrollbars=yes,resizable=yes’)
也得以这么写: var newWindow = open(”,’_blank’);

        
方今使用bootstrap那几个前端框架之中的模态对话框效果,我们知道国外的东西用在境内项目上最喉咙疼的就是传值乱码难点,这里先介绍下模态对话框传值的牵线(不是一贯访问静态html也许间接张开写在近年来分界面包车型大巴二个层里而是展开一个后台,将所急需的值管理好再传值前台的模态对话框).首先看下英文介绍:诸如

1.窗体的习性

 

(“#父窗口成分ID”,window.parent.document);
对应javascript版本为window.parent.document.getElementByIdx_x(“父窗口成分ID”);

<a data-toggle="modal"href="remote.html"data-target="#modal">click me</a> 这样的例子,当然还需要个目的显示层。废话不多说,下面贴出笔者自己修改的模态对话框部分的代码,使用者可以自行覆盖bootstrap.js的相关模块,这里如果不商用应该不涉及版权问题。下面代码的重点是将远程url的参数分解,即以"?"划分请求正文部分和参数部分。这里url对应的对象是this.options.remote,我们只要对这个对象处理就好了,读者可以打印下这个对象,它本身只是个url字符串,我们所遇到的乱码问题也是源自此。jquery的load()函数最全的属性设置如下"

主窗体:

模态对话框(Modal Dialogue
博克斯,又称作方式对话框),是指在用户想要对对话框以外的应用程序实行操作时,必须首先对该对话框实行响应。如单击【分明】或【打消】开关等将该对话框关闭。一般的话,Windows应用程序中,对话框分为模态对话框和非模态对话框三种。二者的区分在于当对话框张开时,是或不是同意用户张开其余对象的操作。

参数表达如下: top=# 窗口顶端离开显示器顶端的像素数
left=# 窗口左端离开显示屏左端的像素数
width=# 窗口的增加率
height=# 窗口的冲天
menubar=… 窗口有未有菜单,取值yes或no
toolbar=… 窗口有未有工具条,取值yes或no
location=… 窗口有未有地址栏,取值yes或no
directories=… 窗口有未有连接区,取值yes或no
scrollbars=… 窗口有未有滚动条,取值yes或no
status=… 窗口有未有状态栏,取值yes或no
resizable=… 窗口给不给调度大小,取值yes或no

  1 /* MODAL CLASS DEFINITION    2   * ====================== */    3     4   var Modal = function (element, options) {    5     this.options = options    6     this.$element = $(element)    7       .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))    8     this.options.remote && this.$element.find('.modal-body').empty();     9     var str=this.options.remote;   10     var sendok=str.substr(0,str.lastIndexOf("?"));   11     str=str.substr(str.lastIndexOf("?")+1,str.length);   12       if(str!=""){   13     var params=str.split("&");   14      var sendpara="{";   15      for(var i=0;i<params.length;i++){   16          if(params[i]!=""){   17                  var paramsd=params[i].split("=");   18                  sendpara+=("\""+paramsd[0]+"\""+":"+"\""+paramsd[1]+"\"")+",";   19          }   20      }   21     }   22            sendpara=sendpara.substring(0,sendpara.lastIndexOf(","))+"}";       23            sendpara= eval("("+sendpara+")");   24     this.options.remote && this.$element.find('.modal-body').load(sendok,sendpara);   25   }   26    27   Modal.prototype = {   28    29       constructor: Modal   30    31     , toggle: function () {   32 //        return this[!this.isShown ? 'show' : 'hide']()   33       }    34    35     , show: function () {   36         var that = this   37           , e = $.Event('show')   38         this.$element.trigger(e)   39         if (this.isShown || e.isDefaultPrevented()) return   40         this.isShown = true   41         this.escape()    42         this.backdrop(function () {   43         var transition = $.support.transition && that.$element.hasClass('fade')   44    45           if (!that.$element.parent().length) {   46             that.$element.appendTo(document.body) //don't move modals dom position   47           }   48           that.$element.show()   49           if (transition) {   50             that.$element[0].offsetWidth // force reflow   51           }   52           that.$element   53             .addClass('in')   54             .attr('aria-hidden', false)   55           that.enforceFocus()   56           transition ?   57             that.$element.one($.support.transition.end, function () { that.$element.focus().trigger('shown') }) :   58             that.$element.focus().trigger('shown')   59    60         })   61       }   62    63     , hide: function (e) {   64         e && e.preventDefault()   65    66         var that = this   67    68         e = $.Event('hide')   69    70         this.$element.trigger(e)   71    72         if (!this.isShown || e.isDefaultPrevented()) return   73    74         this.isShown = false   75    76         this.escape()   77    78         $(document).off('focusin.modal')   79    80         this.$element   81           .removeClass('in')   82           .attr('aria-hidden', true)   83         $.support.transition && this.$element.hasClass('fade') ?   84           this.hideWithTransition() :   85           this.hideModal()   86          $(".showall").each(function(index) {    87              $(this).remove();   88              })   89       }   90    91     , enforceFocus: function () {   92         var that = this   93         $(document).on('focusin.modal', function (e) {   94           if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {   95             that.$element.focus()   96           }   97         })   98       }   99   100     , escape: function () {  101         var that = this  102         if (this.isShown && this.options.keyboard) {  103           this.$element.on('keyup.dismiss.modal', function ( e ) {  104             e.which == 27 && that.hide()  105           })  106         } else if (!this.isShown) {  107           this.$element.off('keyup.dismiss.modal')  108         }  109       }  110   111     , hideWithTransition: function () {  112         var that = this  113           , timeout = setTimeout(function () {  114               that.$element.off($.support.transition.end)  115               that.hideModal()  116             }, 500)  117   118         this.$element.one($.support.transition.end, function () {  119           clearTimeout(timeout)  120           that.hideModal()  121         })  122       }  123   124     , hideModal: function () {  125         var that = this  126         this.$element.hide()  127         this.backdrop(function () {  128           that.removeBackdrop()  129           that.$element.trigger('hidden')  130         })  131       }  132   133     , removeBackdrop: function () {  134         this.$backdrop && this.$backdrop.remove()  135         this.$backdrop = null  136       }  137   138     , backdrop: function (callback) {  139         var that = this  140           ,   141           animate = this.$element.hasClass('fade') ? 'fade' : ''  142         if (this.isShown && this.options.backdrop) {  143           var doAnimate = $.support.transition && animate  144             $(".showall").each(function(index) {   145              $(this).remove();  146              })  147           this.$backdrop = $('<div class="modal-backdrop ' + animate + ' showall " />')  148             .appendTo(document.body)  149           this.$backdrop.click(  150           )  151           if (doAnimate) this.$backdrop[0].offsetWidth // force reflow  152   153           this.$backdrop.addClass('in')  154           if (!callback) return  155           doAnimate ?  156             this.$backdrop.one($.support.transition.end, callback) :  157             callback()  158   159         } else if (!this.isShown && this.$backdrop) {  160           this.$backdrop.removeClass('in')  161   162           $.support.transition && this.$element.hasClass('fade')?  163             this.$backdrop.one($.support.transition.end, callback) :  164             callback()  165   166         } else if (callback) {  167           callback()  168         }  169       }  170   }

图片 1

window.showModalDialog(“url”,”向指标对话框传的值”,”窗口特征参数”)
张开模态对话框

(3) 使用模态对话框达成复杂的对话框须求 在javascript的内建格局中还会有一类措施能够完结通过对话框突显HTML内容,
也正是说能够因此成立对话框的不二秘诀来完毕成立窗口对象所能完结的成效。
蕴涵创设模态对话框和非模态对话框二种。

 

民用计算:

特征参数:用分号隔断,像素大小用px。dialogHeight,dialogWidth,center,等

(2)
在javascript中除去通过open()方法创设window对象完结弹出窗口外,还能透过树立对话框的办法弹出窗口。
如:
alert(“”); //弹出新闻提示对话框
confirm(“”); //弹出新闻确认对话框
prompt(“”); //具有交互性质的对话框
但是,上述完结的弹出窗口具有的效益相比单一,只可以完成较为轻巧的意义。对于急需在对话框中映现八个数据信息,
竟然是HTML控件就不能了。

道理当然是那样的这只是一局地,剩下的靠读者自个儿商讨。至于url转化为this.options.remote对象的连锁代码如下

一,这这么些变量能够做为一个共用变量,大家都能够利用,需求改造的时候一贯赋值就足以了。

模态对话框

您恐怕感兴趣的文章:

  • jquery、js调用iframe父窗口与子窗口成分的主意整理
  • js
    父窗口调控子窗口的一举一动-展开,关闭,重一贯,回复
  • js操作模态窗口及父子窗口间相互传值示例
  • JavaScript贯彻弹出子窗口并传值给父窗口
  • JavaScript子窗口调用父窗口变量和函数的秘诀
  • 用javascript父窗口调节只弹出三个子窗口
  • JavaScript新窗口与子窗口传值详解
  • js创设子窗口同期回传值示例代码
  • JS获取子窗口中回到的数码完毕情势
  • jquery
    子窗口操作父窗口的代码
  • iframe里面的要素触发父窗口成分事件的jquery代码
  • JQUE奥迪Q5Y
    获取IFrame中指标及得到其父窗口中对象示例
  • JS与jQuery达成子窗口获取父窗口成分值的点子

或是当您看到题指标时候,你会想,这窗体间传值方法就好像此多,无非正是那三种:

图片 2

参数表达: sU奥迪Q7L:必选参数,类型:字符串。
用来钦点对话框要显得的文书档案的UCRUISERL。
vArguments:可选参数,类型:变体。
用来向对话框传递参数。传递的参数类型不限,包蕴数组等。对话框通过window.dialogArguments来获取传递进入的参数。
sFeatures:选参数,类型:字符串。
用来描述对话框的外观等音讯,可以应用以下的三个或多少个,用分号“;”隔断。
dialogHeight:对话框中度
相当大于100px,IE4中dialogHeight和dialogWidth
暗中认可的单位是em,而IE5中是px,为方便其见,在概念modal方式的对话框时,用px做单位。
dialogWidth: 对话框宽度。
dialogLeft: 距离桌面左的偏离。
dialogTop: 离桌面上的距离。
center: 窗口是或不是居中
暗许yes,但仍可以够钦命中度和幅度,取值范围{yes | no | 1 | 0 }。
help: 是不是出示援助开关
暗中认可yes,取值范围 {yes | no | 1 | 0 }。
 resizable: 是不是可被改换大小。
默许no,取值范围 {yes | no | 1 | 0 } [IE5+]。
 status: 是还是不是出示状态栏。
默认为yes[ Modeless]或no[Modal],
取值范围{yes | no | 1 | 0 } [IE5+]。
scroll:指明对话框是不是出示滚动条。
默以为yes,取值范围{ yes | no | 1 | 0 | on | off }。
再有多少个属性是用在HTA中的,在形似的网页中貌似不利用。
dialogHide:在打字与印刷也许打字与印刷预览时对话框是还是不是隐身。
默认为no,取值范围{ yes | no | 1 | 0 | on | off }。
edge:指明对话框的边框样式。
默以为raised,取值范围{ sunken | raised }。
unadorned:默以为no,取值范围{ yes | no | 1 | 0 | on | off }。

 1   $(document).on('click.modal.data-api', '[data-toggle="modal"]', function (e) {   2     var $this = $(this)   3       , href = $this.attr('href')   4       , $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7   5       , option = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data())   6    7     e.preventDefault()   8    9     $target  10       .modal(option)  11       .one('hide', function () {  12         $this.focus()  13       })  14   })  15   16 }(window.jQuery);

2.静态变量(那个最简便)


"(该例子引自jquery1.7.2的文档)。bootstrap源码this.options.remote && this.$element.find('.modal-body').load( this.options.remote);(为下面代码修改后的line24)似乎并没有考虑中文参数的问题,所以才出现这种情况因此我们要做的只是变更它的方法样式就可以实现中文乱码的解决方案了。另外笔者这里还解决了如果重复点击模态下拉的按钮会卡并且重复显示相同数据的问题(这里的原因是对数据进行了缓存)这里就不做介绍了。

总体的代码在此: .NET Framework 4.0。

传播参数: 要想对话框传递参数,是通过vArguments来张开传递的。类型不限制,对于字符串类型,最大为40九十六个字符。也得以传递对象
例如: var newWin=window.showModalDialog(url,window,’dialogHeight:500px,
dialogLeft:100px, dialogTop:100px,
dialogWidth:300px, status:0, edge:sunken’);
newWin.open();
与行使window.open()方法创制窗口比较,模态方法创立窗口的界别在于有模态方法创立的窗口后将不能够操作父窗口.
2、子窗口与父窗口间通讯
(1) 使用window.open()创造的窗口与父窗口通讯
可以在子窗口页面中经过window.opener来获取父窗口对象,获取之后子窗口便足以对父窗口实行刷新,传值等操作。
如: window.opener.location.reload(); //子窗口刷新父窗口
window.opener.location.href //获取父窗口href
window.opener.locaiton.pathname //获取父窗口路线名
//刷新父页面
window.location.href=window.location.href ; //重新定位父页面
window.location.reload;
(2) 模态窗口与父窗口通讯 由此选择showModelDialog(),及showModelessDialog()方法创制的子窗口想与父窗口通讯时,不可能经过window.opener
来猎取父窗口对象。要落到实处通讯,必须在开立模态子窗口时向子窗口传来父窗口对象。
兑现情势为:
在父窗口中: var newWin=window.showModelDialog(url,window,”);
newWin.open();
那时候参数window正是父窗口对象
在子窗口中: 需率先获得父窗口对象,然后能力动用父窗口对象。由于父窗口对象是在开创
子窗口时通过传播参数的方法传入的,由此,在子窗口中也不得不通过获得窗口参数的法子获得父窗口对象。赢得格局如下: var parent=widnow.dialogArguments;
变量parent就是父窗口对象。
例如: //通过子窗口提交父窗口中的表单:form1,提交后施行查询操作
var parent=window.dialogArguments;
parent.document.form1.action=”QueryInfor.jsp”;
parent.submit();
//刷新父页面
var parent=window.dialogArguments;
parent.location.reload();
//从子窗口传值到父窗口
要兑以往模态子窗口中传值到父窗口,必要运用window.returnValue达成
落到实处格局如下:
在子窗口中:
//获取父窗口某字段值,对该值加一后赶回父窗口
var parent=window.dialogArguments;
var x=parent.docuement.getElementById(“age”).value;
x=x+1;
//传回x值
window.returnValue=x;
在父窗口中: //获取来自子窗口的值
var newWin=window.showModelDialog(url,window,”);
if(newWin!=null)
document.getElementByIdx_x(“age”).value=newWin;
//在子窗口中设置父窗口的值
在子窗口中向父窗口中传入值就好像从未一贯设置父窗口中的值来得明了。直接设置父窗口凉月素的值显得要越来越灵活一些,但是具体运用哪一种格局要依赖实际情况和已有的达成方式而定,因为若是接纳了不切实际的措施不止下跌开采成效,也下降了实践成效,往往也会产生不优雅的落到实处方式和代码风格。
子窗口设置父窗口的值使用办法如下:
子窗口中: var parent=window.dialogArguments;
var x=parent.document.getElementByIdx_x(“age”).value;
x=x+1;
//设置父窗口中age属性值
parent.document.getElementByIdx_x(“age”).value=x;
如上是自家在品种中利用javascript消除子窗口难题时,搜聚及堆积的局地措施和资料。我是选取建设构造模态窗口的主意来促成的(那首要与系列自己有关),不过事实上无论是应用window.open()照旧选择window.showModelDialog()进行传参等操作时固然在促成格局上有极大的歧异,初次接触会感觉有一点点乱,但万一理清子窗口与父窗口之间的关系和剧中人物从此,就很好通晓了。

 

代码:

其不相同在于: 用showModelessDialog()展开窗口时,不必用window.close()去关闭它,当以非模态格局[IE5]张开时,
张开对话框
的窗口还是能够伸开任何的操作,即对话框不总是最上边的症结,当打开它的窗口UKoleosL退换时,它自动关闭。而模态[IE4]情势的对话框始终有火爆(主旨不可移走,直到它破产)。模态对话框和开发它的窗口相调换,因而大家开采其余的窗口时,他们的链接关系还是保留,并且隐藏在移动窗口的下边。
showModeDialog()则不然。

标签:, , , , , , , ,

Your Comments

近期评论

    功能


    网站地图xml地图