如何在按钮单击时重置和关闭模态？

Question

我有一个模态框，上面有一些内容。 当我单击取消按钮时，我想清除并重置模式的内容。 但我面临的问题是，当我单击取消按钮并重新打开模式时，内容仍然保留在模式上。

我附上了模态的图像： image1

上图是在点击取消按钮之前。 下图是关闭模态并再次重新打开模态后的图像。

图 2

我附上了下面的代码：

HTML：

  <div id="myModal" class="modal">

    <!-- The Close Button -->
    <span class="close">&times;</span>

    <!-- Modal Content (The Image) -->
    <div id="imagearea" class="imagearea">
      <div class='dynamic_text' style='display:none;'></div>

    <img class="modal-content" id="img01" src="fashion.jpg">

    </div>
      <div class="text_container">

        <br>
        <div class="img_text">

        </div>
        <div class="input_tag">
          <span class="right_sec_text">Select a region from the picture</span>
          <div class="error"></div>

          <div class="tags" id ="tags"></div>
          <div class="input_box">
          <input type="text" name="tags" id="name_tag" class="input_textbox">
          <button id="settag" class="btn_settag">Set Tag</button>
          </div>
            <div class="footer_btn">
            <p><button class="btn_success" id="btn_add" value="add areas">Confirm Selection</button>
            <p><button class="btn_cancel" onclick="$('#myModal').hide()">Cancel</button>

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

取消按钮的代码：

    <p><button class="btn_cancel" onclick="$('#myModal').hide()">Cancel</button>

有人可以帮我解决这个问题以关闭和重置模态吗？

Answer 1

可以调用modal API并传递hide参数关闭模态

 $('#close').on('click', function() { $('#myModal').modal('hide') });

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Test modal</button> <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="myModal" data-backdrop="false"> <div class="modal-dialog modal-lg"> <div class="modal-content"> The modal will not close until clicked on the button<br/> The modal will not close until clicked on the button<br/> The modal will not close until clicked on the button<br/> The modal will not close until clicked on the button<br/> The modal will not close until clicked on the button<br/> <button class="btn_cancel" id="close">Cancel</button> </div> </div> </div>

Answer 2

作为取消 function 的一部分，您可以添加；

$("#reset").click()或$(".reset").click()

^ 你会找到 class 或那个重置按钮的 ID，我在你的代码中看不到它。 或者只是清除字段的值作为取消按钮 function 的一部分。

我还注意到您的 JavaScript 中有一个错字。 您忘记指定 class；

  $('.btn_cancel').click(function(){
  $('#myModal').on('hidden', function () {
  $(this).removeData('modal');
  });
  });

你有$('btn_cancel').click(function(){...