每次点击后确认模式。第一次工作，然后失败。（Modal on Modal）

我使用Bootstrap启动选择模式，然后是表单模式，最后是用户点击发送后的确认模式。每次点击后确认模式。第一次工作，然后失败。（Modal on Modal）

这个工作正常，但在此之后，确认模式不会弹出，它只是简单地退出。

这里是我的代码：

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

}

来源

2017-04-04 Eric Nguyen

谢谢，但我忘了添加初始模态。所以总的来说，会有一个模态，然后是另一个模态，然后是确认模态。我已更新我的原始帖子。谢谢！！ –

你应该改变你的JS代码到这一点：

function confirmAlert(){ 

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

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

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

}

但是，您可以改善这种代码，但现在你有一个更好的主意，你应该如何切换（显示/隐藏）情态动词，以防止这种错误。

来源

2017-04-04 17:06:45 Genzo

谢谢，但是我忘了添加初始模态。所以总的来说，会有一个模态，然后是另一个模态，然后是确认模态。我已更新我的原始帖子。谢谢！！ –

谢谢！很简单。我想我被困在隐藏所有模态和模态背景。 –

这里是片段，

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

来源

2017-04-04 17:00:45 NikhilGoud

每次点击后确认模式。第一次工作，然后失败。 （Modal on Modal）

回答

相关问题

每次点击后确认模式。第一次工作，然后失败。（Modal on Modal）