2. 程式人生 > >BootStarp3 模態框製作頁面載入等待

BootStarp3 模態框製作頁面載入等待

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

新建小專案，由於大量使用AJAX，為增強使用者體驗，需頁面等待效果。
效果截圖：
這裡寫圖片描述

css圖片：
這裡寫圖片描述

不能上傳附件~~ 只能貼程式碼了… js官網下載

具體程式碼：

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>等待效果</title>
<link rel="stylesheet" href="../loading/bootstrap/css/bootstrap.min.css"
 

    type="text/css">
<script type="text/javascript"
    src="../loading/bootstrap/js/jquery-1.9.1.js"></script>
<script type="text/javascript"
    src="../loading/bootstrap/js/bootstrap.min.js"></script>

<style>
.loading {
    width: 160px;
    height: 56px;
    position: absolute
 
;
    top: 50%;
    left: 50%;
    line-height: 56px;
    color: #fff;
    padding-left: 60px;
    font-size: 15px;
    background: #000 url(../loading/image/loading.gif) no-repeat 10px 50%;
    opacity: 0.7;
    z-index: 9999;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    filter
 
: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
</style>

<script type="text/javascript">
        function  HtmlLoad(url){
            $('#myModal').modal('show');

        setTimeout(function () {
       $('#myModal').modal('hide');
    }, 3000);

        }
</script>

</head>

<body>
    <div class="container">
        <div class="row">
            <button id="load" onclick="HtmlLoad()">載入頁面</button>
        </div>
        <div id="myModal" class="modal fade" data-keyboard="false"
            data-backdrop="static" data-role="dialog"
            aria-labelledby="myModalLabel" aria-hidden="true">
            <div id="loading" class="loading">載入中。。。</div>
        </div>
    </div>
</body>
</html>

相關推薦

BootStarp3 模態框製作頁面載入等待

新建小專案，由於大量使用AJAX，為增強使用者體驗，需頁面等待效果。 效果截圖： css圖片： 不能上傳附件~~ 只能貼程式碼了… js官網下載 具體程式碼： <!DOCTYPE> <html> <head&

bootstrap3-iframe-modal子頁面在父頁面顯示模態框

rbo 相關 belle 綁定 dism label bsp 打開 win 本文靈感來自：http://www.cnblogs.com/chengxuyuanzhilu/p/5132328.html 子頁面內容 //打開模態框 function openM

使用BootStrap模態框瞬間消失，且點擊沒有事件的Button按鈕會刷新頁面

glyphicon pri -c delete 新頁面 出現 sea tro icon 布局時吧Button按鈕放在了form表單中，導致進頁面時，不做任何操作，首先點擊三個Button按鈕，會刷新頁面，新增按鈕本來有的 模態框 也不會彈出來會彈出並瞬間消失，以為是js沖突

讓iframe子頁面中的bootstrap模態框的背景覆蓋到父頁面

      程式碼具體地址 https://github.com/thinkiveWJ/mozan ，可以直接跑起來     父頁面的body元素新增class="top"作為是否是最頂層頁面的標識 &n

EasyUI的Model的Model Window，但是遇到一個問題，就是如何把jsp頁面中js的變數傳入模態框中input的value

用了很多辦法， 最開始嘗試用最基本的JQuery的賦值方法給value賦值，但是發現由於賦值的時候模態框還沒開啟，找不到模態框中引數的id 第二種是用隱藏域還是不行，傳值為null 後來檢視EasyUI官網的window外掛，發現了window的時間跟Pa

彈出頁面，彈出框，$('').modal({}）；模態框

 效果圖：   自己可以新增內容；   引用：amazeui前端框架： <link rel="stylesheet" href="/tc_vsmp/view/assets/css/utils/amazeui.min.css"/> <script

Bootstrap 模態框在點選頁面空白處關閉

近期在使用bootstrap-dialog外掛，在使用時發現通過modal('show')顯示的對話方塊可以在點選頁面空白處關閉，也就是不是模態對話方塊，這不是預期的效果，搜尋之後發現只需進行下面設定

bootstrap 4-標籤頁製作和彈出框（模態框）製作

1、標籤頁（Tabs） 標籤頁是一個經常使用的元件，可以放置較多的內容，又可以節省頁面空間。 如下： 無需寫任何JavaScript程式碼，只需要簡單的為頁面元素指定data-toggle="tab",為url新增nav和nav-tab class  案例程式碼： <

關閉模態框再重新開啟頁面還是存在提示資訊

問題：jsp呼叫jquery校驗出現的問題：當我在文字框輸入資訊後，並且jquery校驗提示錯誤。我把文字框關閉後後重新開啟，提示的錯誤還是會存在。 解決辦法： 加上程式碼： $(function(){ $("#模態框ID").on("hide

bootstrap 模態框動態載入資料

1.頁面中新增modal <!-- 模態框（Modal） --><div class="modal fade" id="showModal" tabindex="-1" role="dialog"    aria-labelledby="myModalL

關於layer模態框給新頁面傳值

昨天用hui後臺模板的時候用到模態框傳值給另一個新頁面模板是這麼寫的  沒辦法給新頁面傳值，於是百度了一下，總結function zhuyuan(title,url,id,w,h,type){   layer.open({        title:'新增分類',      

Bootstrap的模態框遮罩在iframe子頁面彈出時不能覆蓋父頁面的解決方法

前段時間在做公司專案的後臺管理專案的時候，從網上下載了一個前端模板，是基於bootstrap的。之前也用過bootstrap的模態框，用的是Ace Admin的前端模板。也用了iframe，但並沒有遇

同一頁面無法顯示多個模態框的解決辦法

問題描述：第一個模態框可以正常彈出，第二個模態框只顯示陰影，無彈出。 解決辦法：在兩個模態框的程式碼外分別包裹div。 如圖所示，這是一個修改教師資訊的彈出框，模態框的具體程式碼被我摺疊了，大家

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

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

模態框提交表單不開啟新頁面的解決方法

用window.open方法開啟頁面是很慢的 但是用window.showModalDialog快很多 但是遇到一個問題，提交表單的時候，重新給我open了一個頁面出來 然後一陣百度Google 然後得到如下解決方案： 在你的模態框中加上如下js程式碼： <mce:sc

bootstrap模態框（modal)使用remote方法載入資料，只能載入一次的解決辦法

bootstrap的modal中(關於modal的介紹見:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html)，有一個remote選項，可以動態載入頁面到modal-body中 有兩種方法，一種是使用連

偽類target實現純css模態框

content charset text and title html overlay see sca 今天看到一個純css模態框，覺得是很牛呀 看了下用了target偽類， 一直不知道有這麽神奇的偽類 。。 用法是這樣的，給模態框一個id， <div id="po

用vue實現模態框組件

dispatch cast out cancel 升級 -m 接收 方法 eno 基本上每個項目都需要用到模態框組件，由於在最近的項目中，alert組件和confirm是兩套完全不一樣的設計，所以我將他們分成了兩個組件，本文主要討論的是confirm組件的實現。 組件結構

模態框中水平垂直居的問題

理解 src bottom flow back 圖片 over text ccf 　　大家好，今天我們來說一下在寫模態框的時候怎麽使裏面的內容垂直水平居中，我們先把目光放得簡單一點， 　　這個問題其實就等同於怎麽讓一個div垂直水平居中，那我們怎麽來實現這個問題呢？有5

模態框

esp eve style hat cti ima set methods ajax //引入代碼中的插件 下面是三個模態框的案例 <!DOCTYPE html><html lang="zh-cn"><head> <meta