Bootstrap模式打開從PHP而結果

Question

Bootstrap模式是用戶友好的，我已經把這個在我的PHP頁面。 在這個頁面中，我有一個查詢，結果被髮送到php而變量。

<?php 
    $i=0; 
    while ($i < $rows) { 
     $title_books=mysql_result($result,$i,"title_books"); 
     $pages_books=mysql_result($result,$i,"pages_books"); 
     $author_books=mysql_result($result,$i,"author_books"); 
?> 

下拉撥動，dislayed一個drodown菜單，裏面有一個模式的鏈接。當點擊預訂圖書館鏈接時，模式不會打開。

<div class="col-md-1"> 
    <div class="btn-group"> 
     <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      <i class="fa fa-cog fa-2x" aria-hidden="true"></i><span class="caret"></span> 
     </button> 
     <ul class="dropdown-menu"> 
      <li> 
       <a href="#" data-toggle="modal" data-target="#modalShareBk">Book in library</a> 
       <!-- inizio Box Modale Grande --> 
       <div id="modalShareBk" class="modal fade"> 
        <div class="modal-dialog"> 
         <div class="modal-content"> 
          <div class="modal-header"> 
           <button type="button" class="close" data-dismiss="modal">&times;</button> 
           <h4 class="modal-title">Your Books</h4> 
          </div> 
          <div class="modal-body"> 
           <?php include("inc_book.php"); ?> 
          </div> 
          <div class="modal-footer"> 
           <button type="button" class="btn btn-default btn-xs" data-dismiss="modal"> 
            <i class="fa fa-times-circle" aria-hidden="true"></i> Close 
           </button> 
          </div> 
         </div> 
        </div> 
       </div> 
      </li> 
     </ul> 
    </div> 
</div> 

如何解決？

感謝

Answer 1

把你的模式，並把它的ul.dropdown-menu之外。下面是.dropdown-menu的樣式在dropdowns.less：

.dropdown-menu { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: 1000; 
    display: none; // <---- this is hiding your modal 
    float: left; 
    min-width: 160px; 
    padding: 5px 0; 
    margin: 2px 0 0; 
    font-size: 14px; 
    text-align: left; 
    list-style: none; 
    background-color: #fff; 
    -webkit-background-clip: padding-box; 
    background-clip: padding-box; 
    border: 1px solid #ccc; 
    border: 1px solid rgba(0,0,0,.15); 
    border-radius: 4px; 
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); 
    box-shadow: 0 6px 12px rgba(0,0,0,.175); 
} 

例如：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="col-md-1"> 
 
    <div class="btn-group"> 
 
    <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
     <i class="fa fa-cog fa-2x" aria-hidden="true"></i><span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu"> 
 
     <li> 
 
     <a href="#" data-toggle="modal" data-target="#modalShareBk">Book in library</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div> 
 

 
<!-- inizio Box Modale Grande --> 
 
<div id="modalShareBk" class="modal fade"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Your Books</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default btn-xs" data-dismiss="modal"> 
 
      <i class="fa fa-times-circle" aria-hidden="true"></i> Close 
 
     </button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>