Question

我在html文件中有一个popup引导代码，我想在另一个html文件中使用。我在html文件中创建了一个按钮，我想要另一个html文件中的cal model我怎么能这样做？

A.html

<div class="container-fluid"> 
<div class="row">    
<div class="col-xs-12"> <button type="button" id="myBtn" class="btn btn-success" style="width:200px;font-size:30px; transform: rotate(-90deg);
transform-origin: right, top;
-ms-transform: rotate(-90deg);
-ms-transform-origin:left, top;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin:left,center;
position: fixed; bottom:30%; right: -73px;
color:white;" class="btn btn-success">Order</button>
</div>
</div>
</div>
    <script type="text/javascript">
        // Get the modal
   var modal = document.getElementById('myModal');
  // Get the button that opens the modal
  var btn = document.getElementById("myBtn");
  // Get the <span> element that closes the modal
  var span = document.getElementsByClassName("close2")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
 // When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";   
}
 // When the user clicks anywhere outside of the modal, close it
 window.onclick = function(event) {
if (event.target == modal) {
    modal.style.display = "none";
}
}
    </script>

B.HTML

<html>
<head></head>
 <body>
 <!-- The Modal -->
 <div id="myModal" class="modal2">
 <!-- Modal content -->
 <div class="modal-content2">
  <div class="modal-header">
  <span class="close2">Ã—</span>
  <h2>Order Services</h2>
  </div>
  <div class="modal-body2">
  </div>
 <!-- <div class="modal-footer">
  <h3>Modal Footer</h3>
 </div> -->
 </div>
 </div> 
 </body>
 </html>

我想使用B.HTML中的A.HTML。我该如何做到这一点？

Answer 1

你可以使用jquery或你不能创建你的模态作为包含htmls代码的字符串例如

MainActivity

然后在js文件中设置此脚本，然后将其导入任何要使用模式的文件中最后，你可以将它附加到你的身体或删除它

你可以看到这个链接 http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal

Answer 2

在A.html文件

上使用此脚本

$(document).load( "B.html", function() {
  alert( "Load was performed." );
});

Answer 3

在 A.html 中尝试此代码。

<div id="myModalContainer"></div>

$(document).ready(
   function() {
      $( "#myModalContainer" ).load( "B.html #myModal" );       
   }
);

如何从一个html页面使用html到其他html页面？

3 个答案: