BootStrap模態框卡頓問題解決

2021-08-21 09:24:06 字數 1398 閱讀 8853

最近做了專案,前端使用了bootstrap模態框,類似下面**。具體使用的場景是在乙個.net桌面程式的webbrowser控制項中內嵌該網頁,還有在android應用的webview控制項中內嵌該網頁。

class

="modal fade"

id="modal-demo"

tabindex

="-1"

role

="dialog"

aria-labelledby

="mymodallabel"

aria-hidden

="true"

>

class

="modal-dialog"

>

class

="modal-content"

>

class

="modal-header"

>

type

="button"

class

="close"

data-dismiss

="modal"

aria-hidden

="true"

>

×button

>

class

="modal-title"

id="modal-demo-title"

>

標題h4

>

div>

class

="modal-body"

>

內容div

>

class

="modal-footer"

>

type

="button"

class

="btn btn-default"

data-dismiss

="modal"

>

關閉button

>

type

="button"

class

="btn btn-primary"

>

確定button

>

div>

div>

div>

div>

使用ie瀏覽器和chrome瀏覽器呼叫模態框均沒有問題,動畫效果很棒也很流暢。

但是使用.net或者android應用程式內嵌該網頁時,模態框顯示和隱藏明顯卡頓,非常影響客戶體驗。

找到問題就很好解決了,要麼就不用bootstrap的模態框,換乙個彈窗元件比如layui的彈出層。要麼索性把動畫效果去掉。

class="modal fade"改為class="modal",取消動畫後,不再卡頓。

Bootstrap模態框Modal外掛程式

前提是要引入bootstrap.min.js modal 是覆蓋在父窗體上的子窗體。通常,目的是顯示來自乙個單獨的源的內容,可以在不離開父窗體的情況下有一些互動。子窗體可提供資訊 互動等。1.先定義乙個按鈕 data toggle 以什麼事件觸發,如modal,popover,tooltips等 d...

Bootstrap模態框簡單使用

專案中遇到,記錄一下。引入bootstrap的js和css就可以,官網有就不寫了 html modal fade id my modal tabindex 1 role dialog aria labelledby mymodallabel1 aria hidden true modal dialo...

Bootstrap模態框使用詳解

一.模態框的正常點選出現,如新增功能 新增 二.還有一種就是編輯,此時在彈出模態框時,裡面要寫入資料,所以要先取得資料再彈出模態框。這時要加入js 控制 1.jsp頁面 修改2.js 修改使用者 將使用者資訊寫入模態框 function updatesystemuser else dialog.mo...