2. 程式人生 > >關於獲取bootstrap中模態框中表單資料

關於獲取bootstrap中模態框中表單資料

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

首先貼圖如下：

事件 描述 例項
show.bs.modal 在呼叫 show 方法後觸發。 
$('#identifier').on('show.bs.modal', function () {
  // 執行一些動作...
})
shown.bs.modal 當模態框對使用者可見時觸發（將等待 CSS 過渡效果完成）。 
$('#identifier').on('shown.bs.modal', function () {
  // 執行一些動作...
})
hide.bs.modal 當呼叫 hide 例項方法時觸發。 
$('#identifier').on('hide.bs.modal', function () {
  // 執行一些動作...
})
hidden.bs.modal 當模態框完全對使用者隱藏時觸發。 
$('#identifier').on('hidden.bs.modal', function () {
  // 執行一些動作...
})
最近做專案，碰到一個問題，當編輯某一行資料的file時，如果沒有執行儲存操作而僅僅是上傳檔案到瀏覽器，此時關閉模態框，當我編輯另一行資料（該行資料沒有修改file）並上傳伺服器時，提交的file是第一次上傳至瀏覽器的檔案，而我想通過方法清楚file內容時發現modal處於隱藏狀態時，無法獲取其中file的值，因此造成資料混亂的問題，後來經過一系列測試，初步認為，當模態框關閉後，即處於隱藏狀態時，應該時獲取不到其中的表單資料，也就無法清空file值，因此設法在關閉模態框之前清空modal中的值，在網上翻閱了資料，應用了上圖上第三個函式，即可在modal關閉之前清空表單資料

 $(function () { 
 $('#editModal').on('hide.bs.modal', function () {
 clearForm('edit_form');//清空表單方法，如果在模態框關閉後在呼叫該方法並沒有用。
 })
 });

困擾了一天的問題解決了，，興奮啊

當然無法獲取隱藏modal框中的內容純屬個人臆測，如若不對，往廣大網友指出，謝謝~

相關推薦

關於獲取bootstrap中模態框中表單資料

首先貼圖如下： 事件 描述 例項 show.bs.modal 在呼叫 show 方法後觸發。 $('#identifier').on('show.bs.modal', function

bootstrap中模態框的使用，實現酷炫的彈出效果，可以實現form表單，提示框等等

前言：這是我的第四篇垃圾博文，前三篇目前看來只有13次瀏覽量，我自己看的好像就佔了一大半，不過還是要不要臉的寫下去；正文：問題：我們作為後臺開發人員，經常會做一些表單提交，最常見的是對資料庫的的增刪改查，大部分同學做修改的增加的時候都會選擇重新跳轉到一個新的頁面，這樣既不簡潔

Bootstrap中模態框多層巢狀時滾動條問題

在使用Bootstrap中模態框過程中，如果出現多層巢狀的時候，如開啟模態框A，然後在A中開啟模態框B，在關閉B之後，如果A的內容比較多，滾動條會消失，而變為Body的滾動條，這是由於模態框自帶的遮罩的問題。網上有朋友給出的解決方案是在A增加overflow:auto的方法解決，但是這種方法會使得頁面出現兩個

bootstrap中模態框上彈出另外一個模態框

bootstrap3官網明確指出 千萬不要在一個模態框上重疊另一個模態框。要想同時支援多個模態框，需要自己寫額外的程式碼來實現。 bootstrap.css中，遮罩蓬的z-index是1040，模

Bootstrap開啟模態框後對資料處理(標記模態框的開啟與關閉狀態)

JS用全域性變數標記狀態，方法中動態修改全域性變數以標記狀態是一個重要思想。   　　需求:組合條件查詢資料，查詢完之後填充到模態框中，開啟模態框，模態框中有組合條件查詢，此時查詢只需要更新模態框表格資料不需要開啟模態框，也就是讓模態框開啟方法執行一次。 (點查詢的時候只更新資料不會再次開啟模

Bootstrap使用模態框modal實現表單提交彈出框

-s 彈出層 lib 前端 close css 狀態 upd 技術 Bootstrap 模態框（Modal）插件 模態框（Modal）是覆蓋在父窗體上的子窗體。通常，目的是顯示來自一個單獨的源的內容，可以在不離開父窗體的情況下有一些互動。子窗體可提供信息、交互等。如果您想要

bootstrap 的模態框無法獲取焦點

方法一： 重寫 bootstrap 的focus 方法 $(document).ready(function(){ $.fn.modal.Constructor.prototype.enfor

bootstrap刪除模態框彈出並詢問是否刪除【通用刪除模態框】

cnblogs iss 是否 png con btn ima 點擊 void 　　 　　普通的詢問是否刪除的對話框比較low，可以利用bootstrap的模態框代替普通的對話框來實現刪除。 效果: 　　點刪除的時候彈出模態框詢問是否刪除，點確認的時候將需要刪除的

zbb20171215 bootstrap model 模態框

每次 ots function all log 點擊 rap tab dex 1.頁面中添加modal <!-- 模態框（Modal） --> <div class="modal fade" id="showModal" tabindex="-1" r

bootstrap modal模態框

bootstrap modal模態框 因為專案中用到了bootstrap table 顯示錶格且要為每一行設定一個按鈕要就能檢視資訊，所以就直接用bootstrap帶的模態框，但是有個缺點就是非同步的時候比較慢，體驗不是特別的好，至於後來換哪種彈框在本文結尾會敘述。 modal bo

bootstrap的模態框的使用

【1】模態框的編寫 <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="width: 690px; display: none;">

Bootstrap 3 模態框播放視訊

  I'm trying to use the Modal feature from Bootstrap 3 to show my Youtube video. It works, but I can't click on any buttons in the Youtube vide

datatables、bootstrap的模態框關閉，用JQuery清空form資料

//關閉模態框時清空資料 $(function (){ $('#myModalId').on('hidden.bs.modal', function (){ $(':input','#myFormId').not(':button,:submit,:res

PageHelper與bootstrap的模態框,以及jquery程式碼實現分頁查詢顯示以及Echart的使用

模板下載地址:https://files.cnblogs.com/files/han-guang-xue/%E5%88%86%E9%A1%B5%E6%A8%A1%E6%9D%BF.zip jquery程式碼 var pn; var maxPn; $(function () { loading

bootstrap-modal 模態框顯示一下又消失問題解決以及模態框的基本使用方法

一：問題場景 在開發中給button一個點選事件通過方法中的$('#id').modal('show')方式開啟模態框，發現開啟後模態框顯示一下又消失了。 二：解決方法 經過查詢大概有下面幾種方式，我的問題相對好解決採用的是第4個方法解決 1、bootstrap.min.js與mod

Bootstrap -- 外掛: 模態框、滾動監聽、標籤頁

Bootstrap -- 外掛: 模態框、滾動監聽、標籤頁 1. 模態框（Modal）: 覆蓋在父窗體上的子窗體。 使用模態框： <!DOCTYPE html> <html> <head> <meta http-equiv="Content

Angular6+ngx-bootstrap之模態框的使用（三）

方法一： app.module.ts import {ModalModule} from 'ngx-bootstrap/modal'; ModalModule.forRoot() app.component.html <button class="btn btn-o

設定bootstrap modal模態框的寬度和寬度

(1)修改寬度可以通過修改modal中的modal-dialog這個div寬度實現 <div class="modal-dialog" style="width:600px"> (2) 修改高度和寬度最好的辦法是修改modal-body中新增的控制元件，設定控制元件的

解決vue中模態框內資料和外面的資料繫結的問題

問題：表單中的使用者名稱和模態框中的使用者名稱沒有繫結同一個model，但之後在模態框捏輸入發現表單內的使用者名稱也發生了改變。原本計劃是想點儲存之後再改變的。解決方法找到判斷模態框是否顯示的變數。之後用watch監聽該屬性。然後就不會發生上述問題。表單：<el-tab

bootstrap的模態框modal的hidden.bs.modal屬性

這個問題是在春節大展活動上面遇到的問題，專案地址是：http://hd.tongji021.com/20170103/       在抽獎的時候遇到的坑，非常感謝。 hidden.bs.modal的