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

利用BootStrap彈出二級(jí)對(duì)話框的簡(jiǎn)單實(shí)現(xiàn)方法

 更新時(shí)間:2016年09月21日 09:27:09   作者:Franson  
彈出二級(jí)對(duì)話框,即在對(duì)話框的基礎(chǔ)上再彈出一個(gè)對(duì)話框.這篇文章主要介紹了利用BootStrap彈出二級(jí)對(duì)話框的簡(jiǎn)單實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下

彈出二級(jí)對(duì)話框,即在對(duì)話框的基礎(chǔ)上再彈出一個(gè)對(duì)話框。這對(duì)于CRM管理類系統(tǒng)來說應(yīng)用場(chǎng)景很常見??吹骄W(wǎng)上有關(guān)于實(shí)現(xiàn)二級(jí)彈出框的方法,需要在一級(jí)對(duì)話框頁面上添加不少css樣式。其實(shí),完全可以不用這么麻煩。

利用bootstrap實(shí)現(xiàn)二級(jí)對(duì)話框很簡(jiǎn)單,只需要在主頁面上添加兩個(gè)含有class="modal"的DIV標(biāo)簽。如下面代碼:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="decorator" content="window" />
<style type="text/css">
th,td {
white-space: nowrap;
text-align:center;
}
</style>
</head>
<body>
<div class="row">
......
......
...... 
<!-- 代碼映射編輯對(duì)話框(屬于一級(jí)對(duì)話框) -->
<div class="modal" id="codeMapEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
<!-- Modal 新增[源系統(tǒng)]代碼[類型](屬于二級(jí)彈出對(duì)話框) -->
<div class="modal" id="modal_newDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>
<script type="text/javascript" src="codeMapList.js"></script>
</body>
</html>

這樣就可以在id="codeMapEditModal"的對(duì)話框彈出之后,在該對(duì)話框?qū)?yīng)的js腳本中調(diào)用如下方法即可彈出id="modal_newDialog"的對(duì)話框。

function newDataItem(param){
$('#modal_newDialog').modal({
keyboard: false,
backdrop:'static',
remote : Global.ctx + "/html/tuple/codeInfo.html" 
});
}

不過需要注意的是,在對(duì)話框的關(guān)閉按鈕上調(diào)用的方法如下:

一級(jí)對(duì)話框關(guān)閉按鈕的方法為如下綠色標(biāo)注所示:

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
<h4 class="modal-title" id="codeMapEditHeader">XXX</h4></div>

二級(jí)對(duì)話框關(guān)閉按鈕的方法為如下綠色標(biāo)注所示:

<div class="modal-header">
<button type="button" class="close" onclick="modal_close(this)" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">二級(jí)對(duì)話框</h4></div>

如果不這樣做,在關(guān)閉二級(jí)對(duì)話框的時(shí)候?qū)?huì)關(guān)閉一級(jí)對(duì)話框。

以上所述是小編給大家介紹的利用BootStrap彈出二級(jí)對(duì)話框的簡(jiǎn)單實(shí)現(xiàn)方法,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

  • javascript內(nèi)嵌式與外鏈?zhǔn)降幕緫?yīng)用方式

    javascript內(nèi)嵌式與外鏈?zhǔn)降幕緫?yīng)用方式

    這篇文章主要介紹了javascript內(nèi)嵌式與外鏈?zhǔn)降幕緫?yīng)用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2021-12-12
  • JavaScript實(shí)現(xiàn)點(diǎn)擊文字切換登錄窗口的方法

    JavaScript實(shí)現(xiàn)點(diǎn)擊文字切換登錄窗口的方法

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊文字切換登錄窗口的方法,涉及javascript操作div層及相關(guān)樣式的技巧,需要的朋友可以參考下
    2015-05-05
  • JavaScript利用normalizr實(shí)現(xiàn)復(fù)雜數(shù)據(jù)轉(zhuǎn)換

    JavaScript利用normalizr實(shí)現(xiàn)復(fù)雜數(shù)據(jù)轉(zhuǎn)換

    當(dāng)我們需要進(jìn)行數(shù)據(jù)轉(zhuǎn)換以便拆分和維護(hù)時(shí),可以使用redux作者 Dan Abramov 編寫的normalizr來處理數(shù)據(jù),本文將為大家詳細(xì)講講其用法,感興趣的可以了解一下
    2022-07-07
  • Javascript之面向?qū)ο?-封裝

    Javascript之面向?qū)ο?-封裝

    本篇文章通過具體實(shí)例,對(duì)Javascript的封裝過程進(jìn)行案例分析,有助于對(duì)其代碼實(shí)現(xiàn)的理解與學(xué)習(xí)。下面就隨小編一起來看看吧
    2016-12-12
  • 微信小程序使用setData修改數(shù)組中單個(gè)對(duì)象的方法分析

    微信小程序使用setData修改數(shù)組中單個(gè)對(duì)象的方法分析

    這篇文章主要介紹了微信小程序使用setData修改數(shù)組中單個(gè)對(duì)象的方法,結(jié)合具體實(shí)例形式分析了setData進(jìn)行數(shù)組修改的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下
    2018-12-12
  • javascript學(xué)習(xí)總結(jié)之js使用技巧

    javascript學(xué)習(xí)總結(jié)之js使用技巧

    本篇文章給大家分享javascript學(xué)習(xí)總結(jié)之js使用技巧,都是精華喔~小伙伴快來學(xué)習(xí)吧。
    2015-09-09
  • js 函數(shù)的副作用分析

    js 函數(shù)的副作用分析

    函數(shù)副作用 指當(dāng)調(diào)用函數(shù)時(shí),除了返回函數(shù)值之外,還對(duì)主調(diào)用函數(shù)產(chǎn)生附加的影響。例如修改全局變量(函數(shù)外的變量)或修改參數(shù)。
    2011-08-08
  • 詳解webpack運(yùn)行Babel教程

    詳解webpack運(yùn)行Babel教程

    這篇文章主要介紹了詳解webpack運(yùn)行Babel教程,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-06-06
  • 原生JS實(shí)現(xiàn)仿淘寶網(wǎng)左側(cè)商品分類菜單效果代碼

    原生JS實(shí)現(xiàn)仿淘寶網(wǎng)左側(cè)商品分類菜單效果代碼

    這篇文章主要介紹了原生JS實(shí)現(xiàn)仿淘寶網(wǎng)左側(cè)商品分類菜單效果代碼,可實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)滑過tab切換的功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
    2015-09-09
  • 詳解如何利用JavaScript繪制堆疊柱狀圖

    詳解如何利用JavaScript繪制堆疊柱狀圖

    堆疊柱狀圖將每個(gè)柱子進(jìn)行分割以顯示相同類型下各個(gè)數(shù)據(jù)的大小情況。可以形象得展示一個(gè)大分類包含的每個(gè)小分類的數(shù)據(jù),以及各個(gè)小分類的占比,顯示的是單個(gè)項(xiàng)目與整體之間的關(guān)系。本文將利用JavaScript實(shí)現(xiàn)堆疊柱狀圖的繪制,需要的可以參考一下
    2022-03-03

最新評(píng)論