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

Question

提问by New to Rails

I have a list box in the bootstrap modal and a button. When the button is clicked a new button gets rendered inside a div in the modal. When I close the modal and reopen it, the last operation performed on the modal like the button rendered earlier is still present in the modal.

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

How do reset the modal so that when the modal is opened again, the button is not present and user can again select the option from the list box and click on the button to render a new button and so on.

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

<!-- 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>

-- Update ---

- 更新 - -

Why doesn't this work?

为什么这不起作用？

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

Answer 1

采纳答案by Justinas

Just reset any content manually when modal is hidden:

模式隐藏时，只需手动重置任何内容：

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

There is more events. More about them here

还有更多的事件。更多关于他们在这里

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

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

Answer 2

回答by eheydenr

What helped for me, was to put the following line in the ready function:

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

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

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

    ...
    ..
});

When a modal window is closed and opened again, the previous entered and selected values, will be reset to the initial values.

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

I hope this will help you as well!

我希望这也能帮助你！

Answer 3

回答by Rob

Try cloning, then removing and re-adding the element when the modal is hidden. This should keep all events, though I haven't thoroughly tested this with all versions of everything.

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

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

Answer 4

回答by Vatsal Shah

Tried it and working well

尝试过并且运行良好

$('#MyModal').on('hidden.bs.modal', function () {
    $(this).find('form').trigger('reset');
})

resetis dom build-in funtion, you can also use $(this).find('form')[0].reset();

reset是dom内置功能，你也可以使用 $(this).find('form')[0].reset();

And Bootstrap's modal class exposes a few events for hooking into modal functionality, detail at here.

Bootstrap 的模态类公开了一些用于连接模态功能的事件，详情请见此处。

hide.bs.modalThis event is fired immediately when the hide instance method has been called.
hidden.bs.modalThis event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

hide.bs.modal当调用 hide 实例方法时，会立即触发此事件。
hidden.bs.modal当模态完成对用户隐藏时触发此事件（将等待 CSS 转换完成）。

Answer 5

回答by seetha

To reset all the input fields in a modal use the following.

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

$(".modal-body input").val("")

Answer 6

回答by musicin3d

Here's an alternative solution.

这是一个替代解决方案。

If you're doing a lot of changes to the DOM (add/removing elements and classes), there could be several things that need to be "reset." Rather than clearing each element when the modal closes, you could reset the entire modal everytime it's reopened.

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

Sample code:

示例代码：

(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
    })

})()

You can still write your initial state in HTML without worrying too much about what will happen to it later. You can write your UI JS code without worrying about having to clean up later. Each time the modal is relaunched it will be reset to the exact same state it was in the first time.

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

Edit: Here's a version that should handle multiple modals (I haven't tested it)...

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

(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

回答by Shamim Hasan

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

This is perfect solution to remove contact while hide/close bootstrap modal.

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

Answer 8

回答by Jo?o Falc?o

I am using BS 3.3.7 and i have a problem when i open a modal then close it, the modal contents keep on the client side no html("") no clear at all. So i used this to remove completely the code inside the modal div. Well, you may ask why the padding-right code, in chrome for windows when open a modal from another modal and close this second modal the stays with a 17px padding right. Hope it helps...

我正在使用 BS 3.3.7，当我打开一个模态然后关闭它时出现问题，模态内容保留在客户端没有 html("") 根本不清楚。所以我用它来完全删除模态 div 中的代码。好吧，您可能会问为什么当从另一个模态打开一个模态并关闭第二个模态时，windows 的 chrome 中的 padding-right 代码会保留 17px 的 padding right。希望能帮助到你...

$(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 9

回答by Jigarb1992

you can try this

你可以试试这个

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

It will remove all the data from the model and reset it.

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

Answer 10

回答by Kiran Kumar D M

The below statements show how to open/reopen Modal without using bootstrap.

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

Add two classes in css

在css中添加两个类

And then use the below jQuery to reopen the modal if it is closed.

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

.hide_block
 {
   display:none  !important;
 }

 .display_block
 {
    display:block !important;
 } 

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

It worked fine for me :)

它对我来说很好:)

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

提问by New to Rails

采纳答案by Justinas

回答by eheydenr

回答by Rob

回答by Vatsal Shah

回答by seetha

回答by musicin3d

回答by Shamim Hasan

回答by Jo?o Falc?o

回答by Jigarb1992

回答by Kiran Kumar D M

相关推荐

最近更新

标签

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

提问by New to Rails

采纳答案by Justinas

回答by eheydenr

回答by Rob

回答by Vatsal Shah

回答by seetha

回答by musicin3d

回答by Shamim Hasan

回答by Jo?o Falc?o

回答by Jigarb1992

回答by Kiran Kumar D M

相关推荐

如何使用 jQuery 或仅使用 Javascript 将按钮重定向到另一个页面

Javascript 数组作为类javascript中的数据成员

Javascript 您将如何为某些内容设置动画以使其遵循曲线？

Javascript Invariant Violation：当元素在 DOM 中时，目标容器不是 DOM 元素

相关推荐

最近更新

标签