Bootstrap 模態框(也可以說的彈出層)

阿新 • • 發佈：2019-01-15

最近在嘗試使用bootstrap的模態框

使用模態框主要要引入一下幾個js和css:

bootstrap.css

jquery.1.9.1.js(這個可以靈活選擇)

bootstrap.js

html頁面的寫法如下:

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
    <script  src="bootstrap/js/jquery.1.9.1.js"></script>
    <script  src="bootstrap/js/bootstrap.js" 
></script>

在寫模態框的時候使用的class主要有:

modal hide fade in

modal-header

modal-body

modal-footer

此外必要的部分還需要設定data-dismiss="modal"

以下是例項:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>bootstrap擬態框</title>
    <link rel="stylesheet" type="text/css" 
 href="bootstrap/css/bootstrap.css">
    <script  src="bootstrap/js/jquery.1.9.1.js"></script>
    <script  src="bootstrap/js/bootstrap.js"></script>
    
</head>    

<body>
    <div class="container">
        <h2>我是擬態框的例子</h2>
        <div id="example" 
 class="modal hide fade in" style="display:none;">
            <div class="modal-header">
                <a class="close" data-dismiss="modal">X</a>
                <h3>我是擬態框的頭部</h3>
            </div>
            <div class="modal-body">
                <h4>我是擬態框的中間部分</h4>
                <p>我是描述部分</p>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn btn-success">成功</a>
                <a href="#" class="btn" data-dismiss="modal">關閉</a>
            </div>
        </div>
        <p>
            <a href="#example" data-toggle="modal" class="btn btn-primary btn-large">點我彈出擬態框</a>
        </p>
    </div>

</body>
</html>

View Code

效果圖如下:

在測試例項的時候,遇到了TypeError: $ is not a function 這樣的錯誤.糾結了半天.後來想起了js的預載入機制,於是調換了下bootstrap.js和jquery.js的順序.即把jquery放在前面,就可以避免此問題的出現了.希望對大家有幫助.

bootstrap模態框（彈出框），如何新增傳參事件

$('#identifier').modal({ keyboard:false}) Toggle: .modal('toggle')手動切換模態框。 $('#identifier').modal('toggle') Show: .modal('show')手動開啟模態框。 $('#identifier').

Bootstrap 模態框(也可以說的彈出層)

最近在嘗試使用bootstrap的模態框使用模態框主要要引入一下幾個js和css: bootstrap.css jquery.1.9.1.js(這個可以靈活選擇) bootstrap.js html頁面的寫法如下: <link rel="stylesheet" ty

bootstrap在一個模態框上彈出另一個模態框遮罩層問題

bootstrap3官網明確指出千萬不要在一個模態框上重疊另一個模態框。要想同時支援多個模態框，需要自己寫額外的程式碼來實現。 bootstrap3相關原始碼分析開發過程中經常會遇到在一個模態框上彈出另一個模態框， bootstrap.css中&nbs

bootstrap中模態框上彈出另外一個模態框

bootstrap3官網明確指出千萬不要在一個模態框上重疊另一個模態框。要想同時支援多個模態框，需要自己寫額外的程式碼來實現。 bootstrap.css中，遮罩蓬的z-index是1040，模

bootstrap模態框hide遮罩層不隱藏解決辦法

bootstrap modal 模態框 hide 問題：在使用ajax提交模態框表單數據後，隱藏模態框並局部刷新，導致遮罩層不消失原因：模態框隱藏並局部刷新，導致在hide方法沒執行完成時已經局部刷新，沒有隱藏掉遮罩層解決辦法：方法一：把模態框放在更上層頁面，而不是放在子頁面上方法二：利

bootstrap模態框自動彈出與手動彈出詳解

bootstrap模態框自動彈出功能與js 無關，手動彈出則需要js去控制兩者的區別：自動彈出需要在按鈕多設定一個data-target屬性target到模態框的id , JS控制彈出的話需要在按鈕加個click事件$("#Mymodal").modal("show")，

bootstrap 模態框中彈出層 input不能獲得焦點且不可編輯

描述焦點 input 問題 class light -i oot 模態框 bootstrap 模態框中彈出層 input不能獲得焦點且不可編輯問題描述：bs框架支持一層model層的情況下，在模態框中彈出了自定義的彈出層。發現自定義彈出層的輸入框不能獲得焦點且不可編輯。

bootstrap模態框彈出和隱藏，動態改變中間內容

引入檔案 <link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="style.css"> <script src="jquery

bootstrap-模態框-彈出圖片

<button class="btn btn-primary btn-lg" data-toggle="modal" da

bootstrap模態框動態賦值， ajax非同步請求資料後給id為queryInfo的模態框賦值並彈出模態框（JS）

//查詢單個 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : "POST",

bootstrap模態框彈出後如何獲得焦點

這個應該是，模態框出來後，讓輸入框獲得焦點。所以，應該用JS去做這件事情。在模態框事件中，當模態框已經顯示出來時，讓輸入框獲得焦點。下來上程式碼。在$(function(){})中增加以下程式碼：

bootstrap 模態框顯示時點選遮罩層禁止關閉，點選按鈕時關閉模態框。

1.頁面載入完成時彈出模態框：首先要在HTML中新增：aria-hidden="true" data-backdrop="static" $(function(){ $('.modal').mo

模態視窗（彈出框）整合CKEditor實戰

需求背景：電子合同專案下的合同模板新增頁面中是用layer.js實現的彈出框，也叫模態視窗，用之前的summernote文字編輯器不符合當前編輯合同文字內容的需求（1：字型大小2：字型顏色3：

Bootstrap模態框多層巢狀滾動時底層頁面同時滾動的解決辦法

在使用Bootstrap模態框外掛，並在模態框上巢狀，比如輪播圖內容等時，PC端不會出現異常，但是在手機端會出現一種狀況，就是當用戶在模態框上進行手勢操作時，遮蓋層下的頁面（或者說整個頁面），會跟著手勢的上下移動而滾動，這種情況下的解決辦法則是在JS中重新繫結模態框的手指觸控

bootstrap模態框被遮蓋層遮蓋的問題

由於平臺做了一些封裝，導致使用bootstrap與直接使用時有一些出入模態框彈出來時會被遮蓋層遮蓋。如下圖系統用的是一層html巢狀下一層html的方式，如果這個模態框定義在最外層就不會被遮蓋但是顯然這種處理不是很好曾經嘗試將z-index設定為9999也沒用所以這裡打算用選

Bootstrap -- 模態框實現拖拽移動

file set sin boot css modal 鏈接 href 需要 ### 　　這裏實現這個效果　　需要引入 jquery-ui.min.js類庫　　jquery-ui.min.css樣式　　使用它提供的draggable()方法實現 ### 菜

Bootstrap模態框的使用2

submit cat 函數 mail role jstl esp utf-8 add 模態框中顯示一些基本的數據以及觸發一些基本的JS函數 <%@ page language="java" contentType="text/html; charset=UTF-

bootstrap模態框遠程加載網頁的正確處理方式

clas 處理加載網頁 logs def lose 刷新客戶端粘貼 bootstrap模態框遠程加載網頁的方法在bootsrap模態框文檔裏給出了這個方法：使用鏈接模式 <a data-toggle="modal" href="tieniu.php

bootstrap模態框嵌套、tabindex屬性、去除陰影

樣式元素不存在 logs dia src out belle rop 模態框嵌套在開發中，遇到需要通過點擊事件觸發第一個模態框，觸發後通過事件喚起第二個模態框，並且通過事件觸發第三個模態框；即模態框嵌套。模態框嵌套需要用一個模態框包裹所涉及嵌套的模態框，從而點擊

bootstrap:模態框

arc -h something another false rand amp current and <nav class="navbar navbar-default"> <div class="container-fluid"> &

Bootstrap 模態框(也可以說的彈出層)

相關推薦