最近做了專案,前端使用了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...