亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

簡(jiǎn)介BootStrap model彈出框的使用

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

之前，我們講解了bootstrap tab的使用，今天我們來(lái)了解下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>

很簡(jiǎn)單吧，這樣就可以了。

注意：data-target屬性，指向了model的id，所以點(diǎn)擊按鈕，model就會(huì)彈出來(lái)了。

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

如下代碼：

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

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

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

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

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

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

<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".對(duì)了，你還不可以用span樣式直接放到class里面。。

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

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

相關(guān)文章

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

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

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

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

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

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

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

    js 排序動(dòng)畫(huà)模擬 冒泡排序

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

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

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

    基于JavaScript寫(xiě)一款EJS模板引擎

    這篇文章主要介紹了基于JavaScript寫(xiě)一款EJS模板引擎，基本語(yǔ)法就是定義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è)計(jì)模式之裝飾者模式

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

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

    JavaScript實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)飄落的雪花

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

    JavaScript實(shí)現(xiàn)簡(jiǎn)單的日歷效果

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

最新評(píng)論