Bootstrap 多形式框

摘要:多形式框(Modal)是遮盖在父文本框上的子文本框。一般,目地是显示信息来源于一个独立的源的內容,能够不在离去父文本框的状况下有一些互动交流。子文本框可出示信息内容、互动...

多形式框(Modal)是遮盖在父文本框上的子文本框。一般,目地是显示信息来源于一个独立的源的內容,能够不在离去父文本框的状况下有一些互动交流。子文本框可出示信息内容、互动等。

假如您要想独立引入该软件的作用,那麼您必须引入 modal.js。或是,如同 Bootstrap 软件概览 一章中常提及,您能够引入 bootstrap.js 或缩小版的 bootstrap.min.js。

您能够转换多形式框(Modal)软件的掩藏內容:

根据 data 特性:在操纵器原素(例如按键或是连接)上设定特性 data_toggle="modal",同时设定 data_target="#identifier" 或 href="#identifier" 来特定要转换的特殊的多形式框(含有 id="identifier")。 根据 JavaScript:应用这类技术性,您能够根据简易的一行 JavaScript 来启用含有 id="identifier" 的多形式框:
$('#identifier').modal(options)

一个静态数据的多形式对话框案例,以下面的案例所显示:

h2 建立多形式框(Modal) /h2 !__ 按键开启多形式框 __ button > 试着一下 »

結果以下所显示:

模态框(Modal)插件

编码解读:

应用多形式对话框,您必须有某类开启器。您可使用按键或连接。这儿大家应用的是按键。 假如您细心查询上边的编码,您会发觉在 button 标识中,data_target="#myModal" 是您要想在网页页面上添载的多形式框的总体目标。您能够在网页页面上建立好几个多形式框,随后为每一个多形式框建立不一样的开启器。如今,很显著,您不可以在同一時间载入好几个控制模块,但您能够在网页页面上建立好几个不在同時间开展载入。 在多形式框中必须留意二点: 第一是 .modal,用于把 div 的內容鉴别为多形式框。 第二是 .fade class。当多形式框被转换时,它会造成內容淡入渐隐。
aria_labelledby="myModalLabel",该特性引入多形式框的题目。 特性 aria_hidden="true" 用以维持多形式对话框不能见,直至开启器被开启才行(例如点一下在有关的按键上)。 div ,modal_header 是为多形式对话框的头顶部界定款式的类。 ,close 是一个 CSS class,用以为多形式对话框的关掉按键设定款式。 data_dismiss="modal",是一个自定的 HTML5 data 特性。在这里里它被用以关掉多形式对话框。 ,是 Bootstrap CSS 的一个 CSS class,用以为多形式对话框的行为主体设定款式。 ,是 Bootstrap CSS 的一个 CSS class,用以为多形式对话框的底端设定款式。 data_toggle="modal",HTML5 自定的 data 特性 data_toggle 用以开启多形式对话框。

有一些选择项能够用于订制多形式对话框(Modal Window)的外型和感观,他们是根据 data 特性或 JavaScript 来传送的。下表列举了这种选择项:

选择项名字种类/默认设置值Data 特性名字叙述 backdropboolean 或 string 'static'
默认设置值:truedata_backdrop特定一个静态数据的情况,当客户点一下多形式框外界时不容易关掉多形式框。 keyboardboolean
默认设置值:truedata_keyboard当按住 escape 键时关掉多形式框,设定为 false 时则功能键失效。 showboolean
默认设置值:truedata_show当时始化时显示信息多形式框。 remotepath
默认设置值:falsedata_remote应用 jQuery .load 方式,为多形式框的行为主体引入內容。假如加上了一个含有合理 URL 的 href,则会载入在其中的內容。以下面的案例所显示:
 " data_target="#modal" rel="noopener noreferrer" 请点一下我 /a 

div > 试着一下 »

結果以下所显示:

模态框(Modal)插件方法

只必须点一下 ESC 键,多形式对话框即会撤出。

下表列举了多形式框时要采用恶性事件。这种恶性事件可在涵数中当勾子应用。

恶性事件叙述案例 show.bs.modal在启用 show 方式后开启。
$('#identifier').on('show.bs.modal', function () {
 // 实行一些姿势...
shown.bs.modal当多形式框对客户由此可见时开启(将等候 CSS 衔接实际效果进行)。
$('#identifier').on('shown.bs.modal', function () {
 // 实行一些姿势...
hide.bs.modal当启用 hide 案例方式时开启。
$('#identifier').on('hide.bs.modal', function () {
 // 实行一些姿势...
hidden.bs.modal当多形式框彻底对客户掩藏时开启。
$('#identifier').on('hidden.bs.modal', function () {
 // 实行一些姿势...

下边的案例演试了恶性事件的使用方法:

!__ 多形式框(Modal) __ h2 多形式框(Modal)软件恶性事件 /h2 !__ 按键开启多形式框 __ button '#myModal').modal('hide') /script script $(function() { $('#myModal').on('hide.bs.modal', function() { alert('嘿,想听说您喜爱多形式框...'); /script 试着一下 »

結果以下所显示:

模态框(Modal)插件事件

如同上边案例所显示,假如您点一下了 关掉 按键,即 hide 恶性事件,则会显示信息一个警示信息。



联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:小程序模板市场