Question

每次我打开一个Bootstrap Modal表单时，我想要一个新的内容加载而不是添加到现有表单（默认行为）。因此，我希望hello world一次显示在表单上，而不是继续将它们相互添加。我在这里查看了如何做到这一点，并尝试了所有的答案，但没有一个适合我。例如，reset()会清除字段但不删除它们，removeData('bs.modal')不会执行任何操作，.html('')会完全删除表单而不仅仅删除字段。我需要一种方法来完成我想要的东西，每次都有新的形式，并且每次新鲜时加载内容。

此外，你好世界只是一个例子，实际的表格字段可能很多。所以我不想在函数中创建一个新表单，而是清除它并加载某些内容。

JS

function closeForm() {
    $('#myform').removeData('bs.modal'); 
}

function loadForm() {
    $('#myform')[0].reset();

    var html = "<p>Hello world</p>";
    $("#myform").append(html);
}

HTML

<a href="#" class="right" data-toggle="modal" data-target="#myformDiv" onclick="loadForm()">Open form</a>

<div class="modal fade" id="myformDiv" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <button onclick="closeForm()" type="button" class="close right" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" class="close">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <form id="myform">

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

Answer 1

Bootstrap modal提供show和hidden个事件。您可以在hidden上清除表单，并在show上添加内容。

$('#myformDiv').on('show.bs.modal', function() {
  var html = "<p>Hello world</p>";
  $("#myform").append(html);
});

$('#myformDiv').on('hidden.bs.modal', function() {
  $('#myform').empty();
  console.log("modal closed and content cleared");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- Code -->
<a href="#" class="right" data-toggle="modal" data-target="#myformDiv">Open form</a>

<div class="modal fade" id="myformDiv" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">

      <div class="modal-header">
        <button type="button" class="close right" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" class="close">&times;</span>
                </button>
      </div>

      <div class="modal-body">
        <form id="myform">

        </form>
      </div>
    </div>
  </div>
</div>

Answer 2

一种简单但不是最好的方式：

1-创建一个包含所有表单字段的div标签。将其作为id（例如“myFields”）并设置style="display:none"

2- on modal load set $("#myform").html($("#myFields").html());

如何清除内容 - Bootstrap模式

2 个答案: