メインのindex.htmlページからブートストラップ・モーダルを呼び出すにはどうしたらいいですか？

私は私のウェブサイトは、私はstackoverflowの自体に検索常駐するが、溶液がwork..iが私のlogin.htmlとに配置されたモーダルを呼び出したいdidntのここに私のindex.htmlコードメインのindex.htmlページからブートストラップ・モーダルを呼び出すにはどうしたらいいですか？

<body> 
      <nav class="navbar navbar-default navbar-static-top " role="navigation"> 
      <div class="container-fluid"> 
      <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-Optio-navbar-collapse-1" aria-expanded="false"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 

       </button> 
      <a class="navbar-brand" href="#"><img src="images/Untitled-3-0.png"></a> 
      </div> 
      <div class="collapse navbar-collapse navbar-right" id="bs-Optio-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="index.html">About</a></li> 
      <li><a href="index.html">Contact Us</a></li> 
      <li><a href="LightBoxForm.html" class="btn btn-primary btn-md" role="button" data-toggle="modal" data-target="#lightboxform" >Log In</a></li> 
      <div id="lightboxform" class="modal fade" tabindex="-1" data-width="500"> 
     <div class="modal-dialog"> 
    <div class="modal-content"> 
    </div> 
    </div> 

</div> 
      <li><a href="#" class="btn btn-warning btn-md" role="button">Sign Up</a></li> 


      </ul> 



      </div> 
     </div> 




      </nav> 
<body> 
heres the declaration of files 
<link href="css/bootstrap.css" rel="stylesheet"> 
    <link href="css/bootstrap-responsive.css" rel="stylesheet"> 
    <link href="css/bootstrap-modal.css" rel="stylesheet"> 

    <script src="js/jquery.js"></script> 
    <script src="js/bootstrap.js"></script> 
    <script src="js/bootstrap-modalmanager.js"></script> 
    <script src="js/bootstrap-modal.js"></script>

コードだのindex.htmlを持っていますlogin.htmlと内側........

<!-- Modal --> 
    <div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <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>

PS：私はこれに続いてGetting Bootstrap's modal content from another page

出典

2016-11-11 Mohit Miglani

上記のコードは、まさにあなたがしようとしているものですか？ログインページのコンテンツをインデックスページのモーダルに読み込もうとしていますか？ –

私のindex.html page.whatから私のlogin.htmlに配置されたモーダルを呼び出そうとしているのは、モーダルコードを他のhtmlファイルに置く必要があり、メインインデックスに配置されたボタンを使ってログインできるはずです.htmlファイル。 –

はこれを試してみてくださいDID：

<div class="container"> 
    <h2>Basic Modal Example</h2> 
    <!-- Trigger the modal with a button --> 
<div class="collapse navbar-collapse navbar-right" id="bs-Optio-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="index.html">About</a></li> 
      <li><a href="index.html">Contact Us</a></li> 

      <li><a href=login.html class="btn btn-primary btn-md" role="button" data-target=#myModal data-toggle="modal">Log In</a></li> 

     <div class="modal fade text-center" id="theModal"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
    </div> 
    </div> 
</div> 
      <li><a href="#" class="btn btn-warning btn-md" role="button">Sign Up</a></li> 


      </ul> 

      </div> 

    <!-- Modal --> 
    <div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <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> 

</div>

出典

2016-11-11 10:41:25

こんにちは、私は既にあなたのrefrenceのためのインデックス、HTMLのフルボディコードで私の質問を更新した上にコンテナ流体クラスを使用している。 –

メインのindex.htmlページからブートストラップ・モーダルを呼び出すにはどうしたらいいですか？

答えて

関連する問題