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状态

回答

相关问题