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

利用BootStrap彈出二級對話框的簡單實現方法

 更新時間:2016年09月21日 09:27:09   作者:Franson  
彈出二級對話框,即在對話框的基礎上再彈出一個對話框.這篇文章主要介紹了利用BootStrap彈出二級對話框的簡單實現方法的相關資料,需要的朋友可以參考下

彈出二級對話框,即在對話框的基礎上再彈出一個對話框。這對于CRM管理類系統(tǒng)來說應用場景很常見??吹骄W上有關于實現二級彈出框的方法,需要在一級對話框頁面上添加不少css樣式。其實,完全可以不用這么麻煩。

利用bootstrap實現二級對話框很簡單,只需要在主頁面上添加兩個含有class="modal"的DIV標簽。如下面代碼:

<!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">
......
......
...... 
<!-- 代碼映射編輯對話框(屬于一級對話框) -->
<div class="modal" id="codeMapEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
<!-- Modal 新增[源系統(tǒng)]代碼[類型](屬于二級彈出對話框) -->
<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"的對話框彈出之后,在該對話框對應的js腳本中調用如下方法即可彈出id="modal_newDialog"的對話框。

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

不過需要注意的是,在對話框的關閉按鈕上調用的方法如下:

一級對話框關閉按鈕的方法為如下綠色標注所示:

<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>

二級對話框關閉按鈕的方法為如下綠色標注所示:

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

如果不這樣做,在關閉二級對話框的時候將會關閉一級對話框。

以上所述是小編給大家介紹的利用BootStrap彈出二級對話框的簡單實現方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

相關文章

  • javascript內嵌式與外鏈式的基本應用方式

    javascript內嵌式與外鏈式的基本應用方式

    這篇文章主要介紹了javascript內嵌式與外鏈式的基本應用方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2021-12-12
  • JavaScript實現點擊文字切換登錄窗口的方法

    JavaScript實現點擊文字切換登錄窗口的方法

    這篇文章主要介紹了JavaScript實現點擊文字切換登錄窗口的方法,涉及javascript操作div層及相關樣式的技巧,需要的朋友可以參考下
    2015-05-05
  • JavaScript利用normalizr實現復雜數據轉換

    JavaScript利用normalizr實現復雜數據轉換

    當我們需要進行數據轉換以便拆分和維護時,可以使用redux作者 Dan Abramov 編寫的normalizr來處理數據,本文將為大家詳細講講其用法,感興趣的可以了解一下
    2022-07-07
  • Javascript之面向對象--封裝

    Javascript之面向對象--封裝

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

    微信小程序使用setData修改數組中單個對象的方法分析

    這篇文章主要介紹了微信小程序使用setData修改數組中單個對象的方法,結合具體實例形式分析了setData進行數組修改的相關操作技巧與注意事項,需要的朋友可以參考下
    2018-12-12
  • javascript學習總結之js使用技巧

    javascript學習總結之js使用技巧

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

    js 函數的副作用分析

    函數副作用 指當調用函數時,除了返回函數值之外,還對主調用函數產生附加的影響。例如修改全局變量(函數外的變量)或修改參數。
    2011-08-08
  • 詳解webpack運行Babel教程

    詳解webpack運行Babel教程

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

    原生JS實現仿淘寶網左側商品分類菜單效果代碼

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

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

    堆疊柱狀圖將每個柱子進行分割以顯示相同類型下各個數據的大小情況??梢孕蜗蟮谜故疽粋€大分類包含的每個小分類的數據,以及各個小分類的占比,顯示的是單個項目與整體之間的關系。本文將利用JavaScript實現堆疊柱狀圖的繪制,需要的可以參考一下
    2022-03-03

最新評論