bootstrap modal всплывает и вставляет туда

Question

У меня есть таблица с двумя строками и каждая из них имеет кнопку. Я хочу, чтобы вторая кнопка всплывала модально, но когда я запускаю свой код, мода мода, которая должна появиться мной, нажатие кнопки «Просмотр корзины» не появляется. вместо этого он уже существует, когда я меняю свою страницу на страницу, где у меня есть кнопка «Просмотр корзины». Может ли кто-нибудь помочь мне решить эту проблему?

<table> 
    <tr> 
    <div class="btn_form" style="length :150px;"> 
    <form method="post" action="single.php"> 
<input type="image" name="cart" value=<?php echo $array[0]['ProductID']?>image src="img/cart.png height="100px" width="100px" onClick="document.submitForm.hidbrand.value=this.value; document.submitForm.submit();" /> 
    </form> 
    </div> 
     </tr> 
      <tr> 
      <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">View Cart</button> 
      <div class="modal-content"> 
       <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times</button> 
      <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
      <p>Some text in the modal.</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 
    </tr> 
</table> 

Answer 1

Переместите режимные за пределами таблицы, и вы забыли включить первые два DIVs, которые определяют модальный подмостки.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<table> 
 
    <tr> 
 
    <div class="btn_form" style="length :150px;"> 
 
     <form method="post" action="single.php"> 
 
     <input type="image" name="cart" value="<?php echo $array[0]['ProductID']; ?>" src="img/cart.png" height="100px" width="100px" onClick="document.submitForm.hidbrand.value=this.value; document.submitForm.submit();" /> 
 
     </form> 
 
    </div> 
 
    </tr> 
 
    <tr> 
 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">View Cart</button> 
 
    </tr> 
 
</table> 
 

 
<div id="myModal" 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">&times</button> 
 
     <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Some text in the modal.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Ссылки:

http://www.w3schools.com/bootstrap/bootstrap_modal.asp