欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

簡介BootStrap model彈出框的使用

 更新時間：2016年04月27日 10:02:56   作者：James wang  
這篇文章主要介紹了BootStrap model彈出框的使用，介紹的非常詳細(xì)，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧

之前，我們講解了bootstrap tab的使用，今天我們來了解下bootstrap 中model彈出窗的使用。

效果：

代碼：

<input id="btntext" type="button" value="添加文本組件" data-toggle="modal" data-target="#myModal" href="../SysManage/ZuJianManage.aspx"/>
<!-- Modal -->
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body"></div>
</div>

很簡單吧，這樣就可以了。

注意：data-target屬性，指向了model的id，所以點擊按鈕，model就會彈出來了。

當(dāng)然你也可以用js來控制。

如下代碼：

顯示：$('#myModal').modal('show');

隱藏：$('#myModal').modal('hide');

開關(guān)：$('#myModal').modal('toogle');

事件: $('#myModal').on('hidden', function () {// do something…});

注意：我這邊用到了href屬性，這是讓model去 remote一個url。當(dāng)然 ，你可以把你要的內(nèi)容，直接寫在model-body里面。

認(rèn)真看model的div結(jié)構(gòu)，你就會明白，model-body是代表內(nèi)容，model-header是頭部，那么如果要在底部加兩個按鈕，那么就得用下面的代碼了。

<div class="modal-footer">
<a href="#" class="btn">關(guān)閉</a>
<a href="#" class="btn btn-primary">保存</a>
</div>

注意：如果要給model設(shè)置寬度，那必須得加上布局。就是把model放在下面的代碼塊中，并且設(shè)置model的寬度。style="width:500px".對了，你還不可以用span樣式直接放到class里面。。

<div class="container"></div>

以上所述是小編給大家介紹的BootStrap model彈出框的使用，希望對大家有所幫助！

相關(guān)文章

  • js實現(xiàn)網(wǎng)頁倒計時、網(wǎng)站已運行時間功能的代碼3例

    js實現(xiàn)網(wǎng)頁倒計時、網(wǎng)站已運行時間功能的代碼3例

    這篇文章主要介紹了js實現(xiàn)網(wǎng)頁倒計時、網(wǎng)站已運行時間功能的代碼3例,需要的朋友可以參考下
    2014-04-04
  • DWR中各種java方法的調(diào)用

    DWR中各種java方法的調(diào)用

    DWR是一個框架，簡單的說就是能夠在javascript直接調(diào)用java方法，而不必去寫一大堆的javascript代碼。它的實現(xiàn)是基于ajax的，可以實現(xiàn)無刷新效果。不少DWR的例子，但大都只是某種方法的調(diào)用只在使用層面上介紹DWR，并不涉更多的技術(shù)與設(shè)計javascript中是如何調(diào)用的。
    2016-05-05
  • 常用js字符串判斷方法整理

    常用js字符串判斷方法整理

    js常用方法及字符串的常用判斷方法都是在工作中經(jīng)常用到的，在本文整理了一些，感興趣的朋友可以參考下
    2013-10-10
  • js 排序動畫模擬 冒泡排序

    js 排序動畫模擬 冒泡排序

    在js中，想讓線程sleep一下確實不是一件簡單的事情，過多的使用定時器或者回調(diào)函數(shù)，會讓復(fù)雜，凌亂，這時，可以考慮能否使用隊列來做一些簡
    2012-07-07
  • js 獲取坐標(biāo) 通過JS得到當(dāng)前焦點(鼠標(biāo))的坐標(biāo)屬性

    js 獲取坐標(biāo) 通過JS得到當(dāng)前焦點(鼠標(biāo))的坐標(biāo)屬性

    通過JS得到當(dāng)前焦點的坐標(biāo),如何實現(xiàn)，接下來詳細(xì)介紹實現(xiàn)步驟，有需要的朋友可以參考下
    2013-01-01
  • 基于JavaScript寫一款EJS模板引擎

    基于JavaScript寫一款EJS模板引擎

    這篇文章主要介紹了基于JavaScript寫一款EJS模板引擎，基本語法就是定義render函數(shù)，接收html字符串，和data參數(shù)，下面其他具體介紹，需要的朋友可以參考一下
    2022-02-02
  • es6中的import導(dǎo)入模塊 和 export導(dǎo)出模塊詳解

    es6中的import導(dǎo)入模塊 和 export導(dǎo)出模塊詳解

    require 是 CommonJS 模塊系統(tǒng)中用于導(dǎo)入模塊的關(guān)鍵字,采用同步加載方式；而 import 和 export 是 ES6 模塊系統(tǒng)中用于導(dǎo)入和導(dǎo)出模塊的關(guān)鍵字,采用靜態(tài)加載方式,并且支持異步加載,這篇文章主要介紹了es6中的import導(dǎo)入模塊 和 export導(dǎo)出模塊,需要的朋友可以參考下
    2023-11-11
  • javascript設(shè)計模式之裝飾者模式

    javascript設(shè)計模式之裝飾者模式

    這篇文章主要為大家詳細(xì)介紹了javascript設(shè)計模式之裝飾者模式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-01-01
  • JavaScript實現(xiàn)動態(tài)網(wǎng)頁飄落的雪花

    JavaScript實現(xiàn)動態(tài)網(wǎng)頁飄落的雪花

    這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)動態(tài)網(wǎng)頁飄落的雪花，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-06-06
  • JavaScript實現(xiàn)簡單的日歷效果

    JavaScript實現(xiàn)簡單的日歷效果

    本文給大家分享的是一個簡單的JavaScript制作的日歷模板，小伙伴們可以根據(jù)自己的需求，繼續(xù)補(bǔ)充，希望大家能夠喜歡
    2016-09-09

最新評論