表單提交後不自動關閉引導模式

我相信我會在這裏得到一個解決方案，引導模式在表單提交後不會消失。 我只想讓引導模式消失表單提交後，當再次點擊按鈕（不刷新頁面）窗體應該打開，發送數據和模態應該消失等...這就是它！表單提交後不自動關閉引導模式

這裏有一個引導模式：

<div class="modal fade myPopup" id="basicModal" tabindex="-1" role="dialog" 
aria-labelledby="basicModal" aria-hidden="true"> 
    <div class="modal-dialog" id="modal_dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h4 class="modal-title" id="myModalLabel">Add New Board</h4> 
     </div> 
     <div class="modal-body"> 
     <form class="create_Category_board" id="myform"> 
      <input type="text" 
       id="customInput" 
       class="board_name" 
       name="board[name]" 
       placeholder="Board Name ..." /> 
      <input type="text" 
       class="board_description" 
       name="board[description]" 
       placeholder="Board Description ..." /> 
      <input type="hidden" 
       class="board_description" 
       id="myCid" 
       name="board[category_id]" /> 
      <input type="submit" value="Create Board" class="ShowFormButton"/> 
     </form> 
     </div> 
     <div class="modal-footer"> 

     </div> 
    </div> 
    </div> 
</div>

我的表單綁定了骨幹JS功能：

events: { 

    "submit form.create_Category_board": "createCategoryBoard" 
    }, 

    createCategoryBoard: function(event) { 
    event.preventDefault(); 
    var that = this; 

    // get form attrs, reset form 
    var $form = $(event.target); 
    var attrs = $form.serializeJSON(); 

    $form[0].reset(); 

    var board = new Kanban.Models.Board(); 

    // fail if no board name 
    if (!attrs.board.name) { 
     var $createContainer = $("div.create_board"); 
     var $nameInput = that.$el.find("input.board_name"); 

     $createContainer.effect("shake", { 
     distance: 9, 
     times: 2, 
     complete: function() { 
      $nameInput.show(); 
      $nameInput.focus(); 
     } 
     }, 350); 
     return false; 
    } 

    attrs.board.category_id = myid; 
    var category = Kanban.categories.get(myid); 
    var boards = category.get("assigned_boards"); 
    // save list 
    board.save(attrs.board, { 
     success: function(data) { 
     board.get("users").add(Kanban.currentUser); 

     boards.add(board); 

     // keep focus on list input 
     that.$el.find("input.board_name").focus(); 

     } 
    }); 
    $('#basicModal').modal('hide'); 
    }

如上功能的最後一行我曾嘗試最流行的解決方案$('#basicModal').modal('hide');可用在網上！這讓我的模式是這樣的：

即它不是隱藏模式，而且使屏幕的黑色和從屏幕中心更改引導模式的方向，小權。可能會被JS的CSS覆蓋。但我不確定。

來源

2015-08-18 EM923

你可以做一個[plnkr]（http://plnkr.co/）？ –

@PraveenKumar我不知道如何在plnkr中包含主幹代碼！ – EM923

只需通過創建新文件來上傳所有文件。 –

我張貼我自己的答案因爲如果有一個人需要更快的幫助，那麼可能是有幫助的：只需更換：$('#basicModal').modal('hide');這一行：

$(".modal-header button").click();這是我的012的最後一行功能。乾杯:)

來源

2015-08-24 14:29:28 EM923

問題是，div.modal-背景下仍隱藏的模式後，你可以看到它在開發tools.Try簡單刪除 $('#basicModal').modal('hide'); $('.modal-backdrop').remove();

乾杯

來源

2015-08-20 09:21:44

當我再次點擊打開模式（無刷新頁面）時發生了什麼？它不會出現，因爲它已被刪除！如何讓它再次出現在DOM中？ – EM923

表單提交後不自動關閉引導模式

回答

相關問題