Js Jquery创建一个弹出层可加载一个页面

创建弹出层是前端开发中经常涉及的功能之一，利用JS和JQuery可以相对容易地实现。以下是一个完整攻略来创建一个弹出层并且可以加载一个页面。

步骤一：HTML模板

首先需要编写一个HTML模板，包括两个部分：一个页面主体和一个弹出层。页面主体的内容可以随意，只需要在弹出框内部放置一个占位符，表示需要加载其他页面。弹出层的代码如下：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="modal-placeholder">
          <!-- 这里是一个占位符，表示需要加载其他页面内容 -->
        </div>
      </div>
    </div>
  </div>
</div>

其中，.modal是弹出层的样式，.fade表示淡入淡出动画效果；#myModal是弹出层的唯一标识符；#modal-placeholder是一个占位符，表示需要加载其他页面的内容。

步骤二：CSS和JS引入

为了让弹出层的样式和行为正常工作，我们需要引入Bootstrap和JQuery库。在HTML文件中添加以下代码：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

步骤三：JS代码

添加以下JS代码，通过点击按钮触发弹出框并且加载页面内容。

<script>
    $("#btn-load-page").click(function(){
        $("#modal-placeholder").load("example-page.html");
        $('#myModal').modal('show');
    });
</script>

其中，#btn-load-page是一个点击按钮，点击后触发弹出框；example-page.html是需要加载的页面地址；$('#myModal').modal('show')是通过JQuery将弹出层展示出来的方法。

示例一：静态页面

在本地创建一个静态HTML文件，引入Bootstrap和JQuery库，并且添加上述HTML和JS代码，然后运行该页面。点击按钮即可成功展示弹出层并且加载静态页面。

示例二：动态页面

在本地搭建一个简单的Web服务器，创建两个文件：index.html和example-page.php。在example-page.php中添加任意php代码，生成一些动态内容。将上述HTML和JS代码添加到index.html文件中，点击按钮即可成功展示弹出层并且加载动态页面。