表单提交后不自动关闭引导模式

我相信我会在这里得到一个解决方案，引导模式在表单提交后不会消失。 我只想让引导模式消失表单提交后，当再次点击按钮（不刷新页面）窗体应该打开，发送数据和模态应该消失等...这就是它！表单提交后不自动关闭引导模式

这里有一个引导模式：

<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

表单提交后不自动关闭引导模式

回答

相关问题