每次点击后确认模式。第一次工作，然后失败。 （莫代尔模态）

Question

我正在使用Bootstrap启动选择模式，然后是用户单击发送后的表单模式和最终确认模式。

这是第一次正常工作，但在此之后，确认模式不会弹出，只是退出。

这是我的代码：

HTML：

<button type="button" class="btn" data-toggle="modal" data-target="#chooseModal">Open</button>

<!-- Select One Modal -->
<div class="modal fade" id="chooseModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h2 class="modal-title" id="myModalLabel">Select An Option</h2>
      </div>
      <div class="modal-body">
        <button type="button" class="btn" data-toggle="modal" data-target="#myForm">Click to Email</button>
        <button type="button" class="btn" data-toggle="modal" data-target="#chooseModal">Click to Do Something Else</button>
      </div>
    </div>
  </div>
</div> 

<!-- Email Form Modal-->
<div class="modal fade" id="myForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Email</h4>
      </div>
      <div class="modal-body">

        <div class="row">
            <div class="col-xs-12" id="emailInput">
                <h4>To:</h4>
                <input type="text" name="email" id="email"> 
            </div>
            <div class="col-xs-12">
                <h4>Subject:</h4>
                <input type="text" value="subject" name="emailSubject" id="emailSubject"> 
            </div>
            <div class="col-xs-12">
                <h4>Body:</h4>
                <textarea rows="4" id="emailBody"></textarea>
            </div>
            <div class="col-xs-1">
                <button onclick="confirmAlert()" type="button" class="btn" data-toggle="modal" data-target="#myForm">Send</button>
            </div>
        </div>

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


<!-- Confirmation Modal -->
<div class="modal fade" id="PDFconfirmation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h2 class="modal-title" id="myModalLabel">Thank You!</h2>
      </div>
      <div class="modal-body">
        <h2>Your message has been sent.</h2>
      </div>
    </div>
  </div>
</div>  

使用Javascript：

function confirmAlert(){ 

    $(".modal, .modal-backdrop").hide();

    $('#PDFconfirmation').modal('show');

    setTimeout(function(){
        $("#PDFconfirmation, .modal, .modal-backdrop").hide();
    }, 2000);

}

Answer 1

以下是摘录

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <button type="button" class="btn" data-toggle="modal" data-target="#myForm">Open</button>

<!-- PDF Share Form Modal-->
<div class="modal fade" id="myForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Email</h4>
      </div>
      <div class="modal-body">

        <div class="row">
            <div class="col-xs-12" id="emailInput">
                <h4>To:</h4>
                <input type="text" name="email" id="email"> 
            </div>
            <div class="col-xs-12">
                <h4>Subject:</h4>
                <input type="text" value="subject" name="emailSubject" id="emailSubject"> 
            </div>
            <div class="col-xs-12">
                <h4>Body:</h4>
                <textarea rows="4" id="emailBody"></textarea>
            </div>
            <div class="col-xs-1">
                <button type="button" class="btn" data-toggle="modal" data-target="#PDFconfirmation">Send</button>
            </div>
        </div>

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


<!-- Confirmation Modal -->
<div class="modal fade" id="PDFconfirmation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h2 class="modal-title" id="myModalLabel">Thank You!</h2>
      </div>
      <div class="modal-body">
        <h2>Your message has been sent.</h2>
      </div>
    </div>
  </div>
</div> 

Answer 2

您应该将JS代码更改为：

function confirmAlert(){ 

  $("#chooseModal").modal('hide');

  $('#PDFconfirmation').modal('show');

  setTimeout(function(){
    $("#PDFconfirmation").modal('hide');
  }, 2000);

}

但是，您可以改进此代码，但现在您可以更好地了解如何切换（显示/隐藏）模式以防止此类错误。