1. 程式人生 > >modal彈框多次被觸發,點選頁面的任何地方,都出現彈層

modal彈框多次被觸發,點選頁面的任何地方,都出現彈層

之前剛開始正式使用mui的時候,要求寫一個頁面,如下圖所示:

就是在點選”登入問題點這裡“的時候,顯示彈層,點選彈層上的按鈕,彈層消失。

彈層的這個,我是根據demo裡的modals.html來寫的,遇到的第一個問題是,彈層會擋住下面的輸入框,就是說,即使使用者·沒有點選按鈕,彈層沒有顯示出來的情況,在彈層位置下的輸入框,無法輸入內容,即獲取不了焦點。這個情況可以對比一下demo的dom結構和自己的有什麼區別。

第二個問題就是,使用者點選按鈕彈層出來以後,即使點選關閉按鈕讓彈層消失後,點選頁面的任何地方,都會使彈層出現,頁面上的輸入框、checkbox都無法被選擇。

為了解決這個問題,我選擇不使用demo裡的關閉按鈕,通過js來隱藏彈層。程式碼如下:


loginQs是按鈕的id;

mui-modal是彈層的class

closeTips是關閉按鈕的id

相關推薦

modal觸發頁面任何地方出現

之前剛開始正式使用mui的時候,要求寫一個頁面,如下圖所示: 就是在點選”登入問題點這裡“的時候,顯示彈層,點選彈層上的按鈕,彈層消失。 彈層的這個,我是根據demo裡的modals.html來寫的,遇到的第一個問題是,彈層會擋住下面的輸入框,就是說,即使使用者·沒有點選

jQuery遍歷個相同的class顯示隱藏圖示顯示及隱藏其下的內容

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=

JavaScript滑鼠事件滑鼠右鍵出div

document.oncontextmenu = function(){return false}; //禁止滑鼠右鍵選單顯示 var res = document.getElementById('box'); //找到id為b

懸浮球(機型懸浮窗許可權設定狀態列適配可自動或手動設定大小跳轉WebView拖拽處理)

懸浮球:多機型懸浮窗許可權設定,狀態列適配,可自動或手動設定大小,點選跳轉WebView,拖拽處理, 應用內和應用外都可以顯示(可設定取消)可做SDK 和依賴類,橫豎屏切換處理 專案地址: GitHub:https://github.com/gitUserBoy/flow_balls.

使用ButterKnife方法事件響應裡面執行performClick失效不能再同一幀響應事件

最近在專案中使用butterKnife繫結點選事件,在一個控制元件點選中,執行另外一個控制元件的點選事件,然後發現失效。檢視butterknife生成的原始碼,發現butterknife的OnClickListener外層被包裹了一層,目的在於防止同一幀被多次點選。 pu

實現頁面其他地方隱藏div(vue)

監聽事件 listen function 頁面 比較 als 元素 點擊事件 click 方法一:     通過監聽事件 document.addEventListener(‘click‘,function(e){ if(e.target.

使用網頁巢狀iframe標籤左側導航欄在右側動態顯示頁面的資訊

<!--主體內容部分--> <div class="main"> <!-- 左側導航 --> <div class="main_left"> <div class="li_title">使用者管理<span

前端之路:bootstrap table 按鈕元素事件沒反應無效的解決方方案。

問題:bootstrap table 生成的表格裡formatter新增 的  HTML元素 按鈕,js 中新增  點選事件,點選沒反應。或者點選好多次,重新整理在點選,才有反應。             最近專

kubernetes(7): 在windows上面使用原生docker 支援kubernetes服務下就安裝kubernetes-desktop

kubernetes 1,關於docker的kubenetes支援 2,安裝 安裝非常的簡單: 勾選,啟用 kubernetes 就行,然後就開始安裝了。 需要保持網路暢通,能下載docker映象。和k8s.

Echarts統計圖統計圖時判斷的區域是不是統計圖區域

下面的程式碼,是獲取點選統計圖區域的,也就是 X 軸和 Y 軸中的這個框框區域,如下圖的紅色框框中。 myCharts.getZr().on('click', function (params) {        const pointInPixel = [params.

頁面先登入登入後繼續之前頁面

    登入諸如噹噹網之類的購物網站,未登入前可以先將產品放入購物車,當點選結賬的時候會先跳出登入頁面,登入後,繼續跳至結賬頁面。一直想寫一個類似的demo,終於昨天寫了一個,記錄下來。    

ListView每一個Item如何獲取當前Item的資料?

ListView中的setOnItemClickListener事件,是可以通過這個事件的引數拿到當前點選的adapter資料,如下所示: lvImgComm.setOnItemClickListe

jquery特效---jquery顯示縮圖檢視大圖並且大圖可自適應原圖大小

          之前為了實現這樣的效果找了很久,大部分都不是自己想要的。           實現這樣的效果,我用了兩個jquery的框架。一個是 jquery.nailthumb.1.1.js,另一個是jquery.colorbox-min.js。          

android待機新增電量小部件位置資訊圖示模式切換需要改為四種

android版本為5.1 小部件功能的實現是在各自的應用程式裡面, 小部件新增的過程是在Launcher裡面 很明顯,電量小部件的實現是在Settings裡面 要寫一個widgets,必須用到AppWidgetProvider這個類 AppWidgetProvider它是

開啟關閉軟鍵盤螢幕其他地方關閉軟鍵盤

開啟關閉軟鍵盤,點選螢幕其他地方關閉軟鍵 關閉然鍵盤: public void closeKeyboard() { View rootView = getWindow().getDecorView(); closeKeyboard(rootVi

移動端列表某條記錄進入詳情頁返回時定位在剛才的位置

@[列表返回|minirefresh|cookie|sessionStorage] 背景     前不久做一個類似電商的h5專案,產品經理有個業務需求:使用者在商品列表,點選某一條商品的時

LR在錄製自帶的訂票系統時flight按鈕時出現java異常的錯誤的解決辦法

在控制面板上找到java,打卡java控制面板-高階-java外掛,然後把“啟用下一代java外掛(需要重新啟動瀏覽器)”前面的勾去掉不要選。 因為控制面板開啟java報錯 只能找到C:\Program Files (x86)\Java\jre6\b

React Native之存在TextInput輸入有焦點情況下需要才可觸發事件-解決

Bug情況描述:React Native專案中,點選按鈕A出現彈框浮層,彈框中需要TextInput輸入數字,鍵盤浮起來;這時候點選 取消按鈕L 或者 確定按鈕R,只是讓鍵盤收起,但是並沒有觸發 取消

老街老百勝網址13208831115英國移民局拒簽還有來英國的機會嗎?

只有你遇不到沒有你想不到啊!! 但是老街老百勝網址13208831115網址www.lbs818.com不論申請什麽簽證,最怕的就是被拒,但是如果真的被拒了怎麽辦呢? 今天就給大家來支支招~ 首先不是所有case都有上訴權。一般在收到拒簽上訴信的時候,需要了解上訴的期限。如果不是很懂的話,建議找相關律師,上

echart地圖+散圖表觸發BootstrapDialog

  echart地圖和散點圖結合,點選散點觸發BootstrapDialog彈框。 需要引入檔案jquery、bootstrap、bootstrap-dialog.min.js、echarts.min.js、echart地圖用的china.js function repCityStrat