Bootstrap modal open from php while result

Question

Загрузочный модальный пользовательский интерфейс, и я разместил его на моей странице php. На этой странице у меня есть запрос, и результат был отправлен на php while variables.

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

Выпадающий список, выведенный из меню поворота и внутри, есть модальная ссылка. Когда нажмете на Забронируйте в библиотеке ссылка, мода не открывается.

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