Question

我在bootstrap模式中有一个列表框和一个按钮。单击该按钮时，将在模式中的div内呈现新按钮。当我关闭模态并重新打开它时，在模态上执行的最后一个操作（如前面渲染的按钮）仍然存在于模态中。

如何重置模态，以便在再次打开模态时，按钮不存在，用户可以再次从列表框中选择该选项，然后单击按钮以呈现新按钮，依此类推。

        <!-- Modal -->
        <div class="modal fade" id="myModal" 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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Select Language</h4>
              </div>
              <div class="modal-body">                

                <button type="button" class="btn" data-dismiss="modal">Close</button>                    
                <button type="button" class="btn" id="submit_form">Submit</button>

              <div class="modal-body1">
                <div id="placeholder-div1">
                </div>                    
              </div>

              </div>

              <div class="modal-footer">


              <script>                    
                $('#submit_form').on('click', function() {
                    $(".modal-body1").html('<h3>test</h3>');
                });                                    
              </script>

              <script>                    
                $(function(){                    
                    $('.modal-footer').click(function() {
                       $('.modal').modal('hide');        
                    });                          
                }); 
              </script>

              </div>

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

- 更新---

为什么这不起作用？

              <script type="text/javascript">  
                $(function(){  
                      $('#myModal').on('hidden.bs.modal', function (e) {
                      console.log("Modal hidden");
                      $("#placeholder-div1").html("");
                    });
                });

              </script>

Answer 1

只需在隐藏模态时手动重置任何内容：

$(".modal").on("hidden.bs.modal", function(){
    $(".modal-body1").html("");
});

还有更多活动。关于他们的更多信息here

＆＃13;

$(document).ready(function() {
  $(".modal").on("hidden.bs.modal", function() {
    $(".modal-body1").html("Where did he go?!?!?!");
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch modal
</button>

<div class="modal fade" id="myModal" 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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class='modal-body1'>
          <h3>Close and open, I will be gone!</h3>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

对我有帮助的是将以下行放在ready函数中：

$(document).ready(function()
{
    ..
    ...

    // codes works on all bootstrap modal windows in application
    $('.modal').on('hidden.bs.modal', function(e)
    { 
        $(this).removeData();
    }) ;

    ...
    ..
});

当模态窗口关闭并再次打开时，先前输入和选择的值将重置为初始值。

我希望这对你也有帮助！

Answer 3

尝试克隆，然后在隐藏模态时删除并重新添加元素。这应该保留所有事件，尽管我还没有对所有版本的所有版本进行彻底的测试。

var originalModal = $('#myModal').clone();
$(document).on('#myModal', 'hidden.bs.modal', function () {
    $('#myModal').remove();
    var myClone = originalModal.clone();
    $('body').append(myClone);
});

Answer 4

要重置模态中的所有输入字段，请使用以下内容。

([A-Z,a-z,0-9,+-])\w+.

Answer 5

尝试过并且运行良好

 <form [formGroup]="ulLoginForm">                           
        <ion-list>
         <ion-item>
        <ion-input type="password" placeholder="Password"  formControlName="password"></ion-input>
        <p *ngIf="ulLoginForm.get('password').hasError('required') && ulLoginForm.get('password').touched" class="error" padding-left>Password
        is empty</p>
         </ion-item>
        </ion-list>
    </form>

$('#MyModal').on('hidden.bs.modal', function () { $(this).find('form').trigger('reset'); })是dom内置功能，您也可以使用reset

Bootstrap的模态类公开了一些事件，以挂接到模态功能，详细信息at here。

$(this).find('form')[0].reset();隐藏实例立即触发此事件   方法已被调用。

hide.bs.modal模态完成后会触发此事件   对用户隐藏（将等待CSS转换完成）。

Answer 6

这是另一种解决方案。

如果您对DOM（添加/删除元素和类）进行了大量更改，则可能需要“重置”一些内容。不是在模态关闭时清除每个元素，而是可以在每次重新打开时重置整个模态。

示例代码：

(function(){

    var template = null

    $('.modal').on('show.bs.modal', function (event) {
        if (template == null) {
            template = $(this).html()
        } else {
            $(this).html(template)
        }
        // other initialization here, if you want to
    })

})()

您仍然可以在HTML中编写初始状态，而不必过多担心以后会发生什么。您可以编写UI JS代码，而无需担心以后需要清理。每次重新启动模态时，它将重置为与第一次完全相同的状态。

编辑：这是一个应该处理多个模态的版本（我还没有测试过）...

(function(){

    $('.modal').on('show.bs.modal', function (event) {
        if (!$(this).data('template')) {
            $(this).data('template', $(this).html())
        } else {
            $(this).html($this.data('template'))
        }
        // other initialization here, if you want to
    })

})()

Answer 7

那对我来说很准确

let template = null;
    $('.modal').on('show.bs.modal', function(event) {
      template = $(this).html();
    });

    $('.modal').on('hidden.bs.modal', function(e) {
      $(this).html(template);
    });

Answer 8

(function(){
        $(".modal").on("hidden.bs.modal", function(){
            $(this).removeData();
        });
});

这是在隐藏/关闭引导模式时删除联系的完美解决方案。

Answer 9

你可以试试这个

$('body').on('hidden.bs.modal', '.modal', function () {
     $(this).removeData('bs.modal');
});

它将从模型中删除所有数据并重置它。

Answer 10

我正在使用BS 3.3.7，当我打开一个模态然后关闭它时我有一个问题，模态内容保留在客户端没有html（＆＃34;＆＃34;）根本没有明确的。所以我用它来完全删除模态div中的代码。好吧，你可能会问为什么padding-right代码，在chrome中为windows打开另一个模态的模态并关闭这个第二个模态，使用17px填充权限。希望它有所帮助...

$(document)
.on('shown.bs.modal', '.modal', function () { 
    $(document.body).addClass('modal-open') 
})
.on('hidden.bs.modal', '.modal', function () { 
    $(document.body).removeClass('modal-open') 
    $(document.body).css("padding-right", "0px");
 $(this).removeData('bs.modal').find(".modal-dialog").empty();
})

Answer 11

以下语句显示了如何在不使用引导程序的情况下打开/重新打开Modal。

在CSS中添加两个类

然后使用下面的jQuery重新打开模式（如果已关闭）。

.hide_block
 {
   display:none  !important;
 }

 .display_block
 {
    display:block !important;
 } 

 $("#Modal").removeClass('hide_block');
 $("#Modal").addClass('display_block');
 $("Modal").show("slow");

对我来说很好：）

Answer 12

/ *这将使用要在模式中更新的新HTML更改HTML内容，而无需进行过多的重置... * /

var = ""; //HTML to be changed

`$（“。classbuttonClicked”）。click（function（）{

$（'＃ModalDivToChange'）。html（var）; $（'＃myModal'）。modal（'show'）; }）;`

Answer 13

使用BS 3.3.7

$("#yourModal").on('hidden.bs.modal', function () {
    $(this).data('bs.modal', null); // will clear all element inside modal
});

Answer 14

此外，您可以在打开之前克隆模式；）

  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:$(ASPNETCORE_ENVIRONMENT.ToLower())" />
    <PropertyGroup>
      <EnvironmentName>$(ASPNETCORE_ENVIRONMENT)</EnvironmentName>
    </PropertyGroup>
  </Target>

Answer 15

示例代码：

 $(document).on('hide.bs.modal', '#basicModal', function (e) {
        $('#basicModal').empty();
    });

Answer 16

重置模态中的表格。示例代码：

$('#myModal').on('hide.bs.modal', '#myModal', function (e) {
    $('#myModal form')[0].reset();
});

如何在关闭时重置bootstrap模式并再次打开它？

16 个答案: