我从Bootstrap应用模态，但没有正确关闭

我正在从Bootstrap应用模态，但未正确关闭。当我点击右上角的关闭按钮时，它会崩溃，当我点击任何其他模式时，它会正常关闭。我尝试了很多次，但这个问题是不变的。我从Bootstrap应用模态，但没有正确关闭

html, 
 
body { 
 
    height: 100%; 
 

 
} 
 
body { 
 
    padding-top: 20px;  
 
    background: #f9e0b5 ; 
 
    background-size:100%; 
 
    background-repeat: repeat-y; 
 
} 
 
.pro{ 
 
    background:linear-gradient(white, #e7d5b5); 
 
    margin:10px 40px 0px; 
 
    height:250px; 
 
    border-radius:30px; 
 
    box-shadow:5px 5px 5px black; 
 
    cursor:pointer; 
 
} 
 
#pro4{ 
 
    position:relative; 
 
    left:370px; 
 
} 
 
.pro-caption{ 
 
    font-size:17px; 
 
    font-weight:bold; 
 
    font-family:"Comic Sans MS", cursive, sans-serif; 
 
    color:#6b412b; 
 
    background:linear-gradient(white, #f5e5d7); 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<!-- row starts--> 
 
<div class="row">    
 

 
    <div class="col-md-3 pro" data-toggle="modal" data-target="#modal1"> 
 

 
    <!--modal1--> 
 
<div class="modal fade" id="modal1" role="dialog"> 
 
<div class="modal-dialog"> 
 

 
<!--modal1 content--> 
 

 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal"   aria-hidden="true">&times;</button> 
 
     <h3 class="modal-title"> Fresh Milk:Bru Gold Coffee  Machine</h3> 
 
     </div> 
 
     <div class="modal-body"> 
 

 
     <img class="image-responsive" src="images/products/Fresh-Milk-Bru-Gold-Coffee-Machine.png" height="270px"> 
 
     <h4><u><b>Key Features:</b></u></h4> 
 

 
     </div> 
 

 
    </div> 
 
    </div></div> 
 
<figure><img class="image-responsive" src="images/products/Fresh-Milk-Bru-Gold-Coffee-Machine.png" height="270px"></figure> 
 
<figcaption class="pro-caption"> Fresh Milk:Bru Gold Coffee Machine</figcaption> 
 

 

 
</div> 
 
</div>

来源

2016-11-24 Panther

这一行注释掉模式包装 '<！ - modal1 - ' 将其更改为''对不起 –

没有工作。 – Panther

删除ARIA隐藏= “真” 在你

来源

2016-11-24 06:22:52

对不起，但它不工作.. – Panther

删除data-toggle =“模式” –

正如你所看到的，你已经设置了数据目标属性modal1 div，所以你需要有独立的div，即<div id="modal1"></div>，你可以在其中放置你的内容已评论。

<div class="col-md-3 pro" data-toggle="modal" data-target="#modal1"></div>

基本上你已经把你的内容在切换，你需要采取出来，并将其放置在<div id="modal1"></div>弹出类，剩下的就是罚款。

请尝试下面的代码。我希望这可以帮助你。

<html> 
    <head> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

     <!-- jQuery library --> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

     <!-- Latest compiled JavaScript --> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     <!-- row starts--> 

     <style> 
      html, 
      body { 
       height: 100%; 

      } 

      body { 
       padding-top: 20px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */  
       background: #f9e0b5 /*#f9cf86*/ ; 
       background-size:100%; 
       background-repeat: repeat-y; 
      } 


      .pro{ 

       background:linear-gradient(white, #e7d5b5); 
       margin:10px 40px 0px; 
       height:250px; 
       border-radius:30px; 
       box-shadow:5px 5px 5px black; 
       cursor:pointer; 

      } 
      #pro4{ 
       position:relative; 
       left:370px; 
      } 

      .pro-caption{ 
       font-size:17px; 
       font-weight:bold; 
       font-family:"Comic Sans MS", cursive, sans-serif; 
       color:#6b412b; 
       background:linear-gradient(white, #f5e5d7); 
      } 
     </style> 

    </head> 

    <body> 

     <div class="row">    

      <div class="col-md-3 pro" data-toggle="modal" data-target="#modal1"></div> 

      <div id="modal1" class="modal fade" role="dialog"> 
       <div class="modal-dialog"> 


        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
          <h3 class="modal-title"> Fresh Milk:Bru Gold Coffee  Machine</h3> 
         </div> 
         <div class="modal-body"> 

          <img class="image-responsive" src="images/products/Fresh-Milk-Bru-Gold-Coffee-Machine.png" height="270px"> 
          <h4><u><b>Key Features:</b></u></h4> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <figure><img class="image-responsive" src="images/products/Fresh-Milk-Bru-Gold-Coffee-Machine.png" height="270px"></figure> 
    <figcaption class="pro-caption"> Fresh Milk:Bru Gold Coffee Machine</figcaption> 

<!--modal over-->` 
</body> 
</html>

来源

2016-11-24 06:33:52

先生你有什么特别改变？ – Panther

@Panthe：r我已经更新了答案。请检查。 –

我从Bootstrap应用模态，但没有正确关闭

回答

相关问题