bootstrap模态框关闭事件-bootstrap弹出模态框

加载中

当按键被点一下时，多形式的地方看上去难受。有二种解决方法:

1.应用多形式弹出来事情方式；

依据公司文档，多形式部件有很多事情插口:

在其中“showed . bs . modal”能够在弹出对话框框发生后做一些解决，自然也能够更改弹出框的款式:

$(function(){ 0

// dom已载入。

var $ m _ BTN = $(' # ModalBtn ')；

var $ modal = $(' # myModal ')；

$m_btn.on('click '，function(){ 0

$ modal . modal({ background:' static ' })；

});

//检测正确引导对中。

$ modal . on(' showed . bs . modal '，function(){ 0

var $ this = $(this)；

var $modal_dialog = $this.find('。模态对话框’)；

var m_top = ( $(文本文档)。height()–$ modal _ dialog . height())/2；$ modal _ dialog . CSS({ ' margin ':m _ top ' px auto ' })；

});

在这个完成中，弹出框是垂直居中的，可是在一些迟疑以后，它会向正中间摇晃。并不是尤其理想化，那么就试一下第二种方法；

2.改动bootstrap.js源码；

带上问題阅读文章js库源码，常常能够学得许多专业知识。为了更好地怎么让多形式部件全自动垂直居中，当部件弹出来时，逐渐追踪相对应的事情；

开启bootstrap.js ctrl f，寻找modal相匹配的编码:

当弹出框发生时，当然启用方式Modal.prototype.show()，在show方式中启用方式adjustDialog():

从里面的编码看来，官方网完成垂直居中好像太非常容易了，但她们沒有。只有说海外同行业的网站排版布局主视图或是和大家的不一样。加上一点编码:

modal . prototype . adjustdialog = function(){ 0

var modalIsOverflowing = this。$原素[0]。scroll height > document . document element . client height

这一。$ element . CSS({ 0

paddingLeft:！this . body isoverflow & & modalismoverflow？this.scrollbarWidth:“，

划右:this.bodyIsOverflowing & &！情态动词外溢？this.scrollbarWidth:"

})

//弹出框是不是垂直居中…

var $modal_dialog = $(这。$element[0])。搜索('。模态对话框’)；

var m_top = ( $(文本文档)。height()–$ modal _ dialog . height())/2；$ modal _ dialog . CSS({ ' margin ':m _ top ' px auto ' })；

}

随后完成多形式垂直居中，3D渲染如下所示:

评论（0条）