[精讚] [會員登入]
328

Yii2 使用 MODAL class 呈現內容時,如何防止滑鼠失焦導致頁面自動關閉

Yii2 使用 MODAL class 呈現內容時,如何防止滑鼠失焦導致頁面自動關閉

分享此文連結 //n.sfs.tw/11018

分享連結 Yii2 使用 MODAL class 呈現內容時,如何防止滑鼠失焦導致頁面自動關閉@杜子的網管筆記
(文章歡迎轉載,務必尊重版權註明連結來源)
2017-04-25 14:00:48 最後編修
2017-04-25 13:53:28 By 杜子
 

 

Yii2 的 Gii 程式產生器是一個功能非常強大的模組,

能夠在彈指之間產生 CRUD 四個常用功能的 web 頁面

CRUD 即新增、瀏覽、修改、刪除,有在用的人就會知道,這裡不多做解釋。

 

除了傳統的 CRUD ,如果裝了 ajaxCRUD ,還可以產生具有 popup 頁面效果的 CRUD,如下圖

 

編輯頁面是一個彈出視窗,感覺很不賴!

 

現在問題來了,如果在編輯過程中,不小心多按了 [ESC]鍵,或是滑鼠失焦,

也就是點選了 popup 頁面以外的區域,整個頁面就自動關閉,所有你剛剛鍵入的內容就付諸流水了。

 

如何防止這個問題發生呢?可以修改觸發 popup 頁面的那個 view ,打開後找到以下內容,紅字部分請自行參考:

<?php Modal::begin([
    "id"=>"ajaxCrudModal",
    "size"=>Modal::SIZE_LARGE,        <==加入這個參數,可以改變 popup 出來的視窗大小,有 SIZE_DEFAULT、 SIZE_LARGE 、 SIZE_SMALL 三種
    "closeButton"=>["label"=>"close"],   <==這個參數,可以修改右上角那個 x ,改為 close 字樣

    "footer"=>"",// always need it for jquery plugin    
    "clientOptions"=> [                          <== 這個 array ,就是取消誤按 ESC鍵及滑鼠失焦即關閉的功能
           'backdrop' => 'static',
           'keyboard' => false,
    ],

])?>
<?php Modal::end(); ?>

 

END

你可能感興趣的文章

Yii2 中使用 CKeditor 的檔案上傳功能 在 Yii2 的設計經驗中, 常常會使用 CKediotr 做為 textarea 的編輯器, 但是插圖或檔案上傳需要另

Adminlte 取消預設 icon 的方法 Adminlte 是個很好用的樣版, 但是選單的 icon 預設只能用 Font Awesome 的圖示, 如果沒有指定

Yii2 使用 MODAL class 呈現內容時,如何防止滑鼠失焦導致頁面自動關閉 Yii2 使用 MODAL class 呈現內容時,如何防止滑鼠失焦導致頁面自動關閉

利用 Composer 建立 Yii2 專案 最近由於學校的網路架構調整及更新所有的個人電腦作業系統為 Win 10 , 讓我忙得不可開交, 偏偏 sfs3 此時在台

在 Yii2 使用日期 widget的方法 在 Yii2 裡,讓使用者輸入日期時,可以利用 widget 就可以很方便的達成, f

我有話要說


限制:留言最高字數1000字。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

關於豐南國中校內伺服器重架後注意事項 以下是為豐南國中電腦操作環境所寫的內容,閒雜人等不需進入

Windows 手動設定 IP ,重開機後自動消失 今天幫同事處理一部 Windows 10 的 IP 設定問題, 手動設定完,重開機後原本設定好的 IP 會憑空消失, 全

讓校內的 Windows Server 2016 AD 帳號的密碼與臺中市雲端校務系統的密碼同步 臺中市的校務雲端系統釋出 rest 服務,可以直接利用 Call API 方式把帳號的密碼改掉, 方便校內帳號改密碼時可

Let's encrypt 在 FreeBSD 裡自動更新的方式 稍早收到 Let's Emcrypt 的 E-mail 通知, 說我的憑證有效期剩 19 天, 要趕快更新。 這

【停課不停學】豐南國中Google Classroom -教師篇 因為疫情導致的停課 本校採用的線上教學平臺是 Google Classroom 本篇解說老師如何出課堂作業 1. 主畫面