造就模內現有的元素與引導

Question

假設我有與形式ID =「form1的」形式：

<form id="form1"> 
    <input type="text"> 
</form> 

我還顯示一個按鈕，允許用戶帶來了一個模式：

<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal"> 
     Click here to zoom in! 
</button> 

的挑戰是，我希望我的模態表現出同樣的窗體（Form），但到目前爲止，我還沒有多少運氣得到這個。下面是我的模態代碼：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
<div class="modal-content"> 
    <div class="modal-header"> 
    <h3>This is my header</h3> 
    </div> 
    <div class="modal-body"> 

<!-- I WANT TO ADD THE INPUT FORM THAT EXISTS OUTSIDE THE MODAL HERE -->  

    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    </div> 
</div> 

這可能嗎？如果是這樣，怎麼樣？

Answer 1

如果表單和所有標記位於同一頁面上，那麼將表單標記放在div中，如果仍然無法使用類模式體，請使用java-script來顯示模式。這裏是示例工作代碼，

<button class="btn btn-primary btn-sm" data-toggle="modal" id="showModalPopup" data-target="#myModal"> 
      Click here to zoom in! 
     </button> 

     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
      <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> 
         <h4 class="modal-title">This is my header</h4> 
        </div> 

        <div class="modal-body"> 
         <form id="form1"> 
          <input type="text" /> 
         </form> 

        </div> 

        <div class="modal-footer"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        </div> 
       </div> 
      </div> 
     </div> 

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <link rel="stylesheet" href="css/bootstrap.css"> 
    <script src="js/bootstrap.min.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function(){ 
     $('#showModalPopup').on('click', function(e) { 
      e.preventDefault();   
      $('#myModal').modal('show'); 
     }); 
    }); 
    </script> 

我希望它有幫助。