我從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應用模態，但沒有正確關閉

回答

相關問題