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>