bootstrap modal在關閉後進入初始UI狀態

我正在使用Bootstrap 3模式。我在模態中有一個文本輸入，單擊時鏈接將在第一個文本輸入字段下創建最多4個字段。我的代碼工作正常，它創建更多的輸入字段。bootstrap modal在關閉後進入初始UI狀態

但是，當我關閉模式並再次打開時，根據先前點擊鏈接的次數，有多個輸入文本字段。我不希望發生這種情況 - 當我關閉模式並再次打開它時，我只想看到只有一個輸入文本字段（初始狀態），並且沒有看到模式中DOM的更改。這可能嗎？

2015-07-19 user1619991

你想使用在自舉的Javascript文件here

首先在hide.bs.modal事件我想添加一個類的所有投入要素和新渲染的div元素clearAfterClose輸入和hideAfterClose爲divelements。然後，我會創造我的jQuery函數爲：

$('#myModal').on('hide.bs.modal', function(e) { 
    $('.clearAfterClose').val(''); 
    $('.hideAfterClose').hide(); 
})

每當模式是隱藏這將火和清除與該CLAS clearAfterClose所有投入要素和隱藏所有div與CLAS hideAfterClose。我爲示範創建了一個codepen here

來源

2015-07-19 07:58:48 code

感謝您的回答！ – user1619991

這是不是更容易比批准的答案嗎？ – code

，而不是「重新編寫所有的HTML只是打電話jQuery的功能是什麼？有人嗎？..... – code

因爲您正在編輯HTML，所以它始終存在。在您刷新頁面或將其自行設置之前，模式不會回到原始狀態。只需清空容器，並在關閉模式時重新添加第一個輸入。注意發生了什麼事的「$（ '＃DIV myModal'）。在（ 'hidden.bs.modal'」事件塊。

你的JS（我重構原來的代碼位）

$('#additional-fields').on('click', function() { 

    var emailInputList = $('div.email-input-list'), 
    itemCount = emailInputList.children().length, 
    newItem = $('<div class="form-group"><label for="txtFriendEmail' + itemCount + '" class="sr-only">Email</label><input type="text" class="form-control" placeholder="Email" id="txtFriendEmail' + itemCount + '"></div>'); 

    if (itemCount < 4) { 
    emailInputList.append(newItem); 
    } 

}); 

$('div#myModal').on('hidden.bs.modal', function() { 
    $('div.email-input-list').empty().append($('<div class="form-group"><label for="txtFriendEmail0">Email</label><input type="text" class="form-control" placeholder="Email" id="txtFriendEmail0"></div>'));  
});

你的HTML

<a href="#myModal" role="button" class="btn btn-default" data-toggle="modal">Launch demo modal</a> 

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <h3 id="myModalLabel">Modal header</h3> 
    </div> 
    <div class="modal-body"> 
     <div class="form-group clearfix" id="input-array"> 
       <div class="row"> 
        <div class="col-sm-6 email-input-list"> 
        <div class="form-group"> 
         <label for="txtFriendEmail0">Email</label> 
         <input type="text" class="form-control" placeholder="Email" id="txtFriendEmail0"> 
        </div> 
        </div> 
        <div class="col-sm-5"> 
        <p class="form-group-input-helper"><a href="javascript:void(0);" id="additional-fields">Add another friend's email</a></p> 
        </div> 
       </div> 
       </div> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
     <button class="btn btn-primary">Save changes</button> 
    </div> 
</div> 
</div> 
</div>

來源

2015-07-19 08:05:24 TylerJPresley

謝謝！它的工作 – user1619991

bootstrap modal在關閉後進入初始UI狀態

回答

相關問題