目录
一、需求：
使用原始jq，不借助插件、框架，实现弹窗，并且弹窗内容是外部页面，类似于layer.open的弹窗功能。
二、效果图
点击左上角“点击”按钮，弹出一个页面窗口。
三、实现代码
前端：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="./jquery-1.11.3.min.js"></script>
<script src="./jqPopup.js"></script>
<style>
.jq-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
z-index: 1001;
display: none;
}
.jq-popup-main {
position: relative;
width: 100%;
height: 93%;
}
.jq-popup-title {
padding: 15px;
border-bottom: 1px solid #eee;
font-size: 16px;
font-weight: bold;
}
.jq-popup-content {
height: 100%;
/*padding: 15px;*/
/*overflow: auto;*/
overflow: hidden;
}
.jq-popup-footer {
padding: 15px;
text-align: right;
border-top: 1px solid #eee;
}
.jq-popup-close {
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
font-size: 20px;
color: #999;
}
.jq-popup-close:hover {
color: #333;
}
.jq-popup-shade {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
z-index: 1000;
display: none;
}
</style>
</head>
<body>
<button id="popupButn">点击弹窗</button>
</body>
<script>
// 要加载的外部页面url
var url = 'xxxxxx'
var width = $(window).width()-50 // 获取窗口宽度并-50
var hei = $(window).height()-50 // 获取窗口高度并-50
$("#popupButn").click(function () {
// 加载iframe页面
$.jqPopup({
type: 2,
title: '处方审核',
content: url,
area: [width , hei]
});
// 加载页面片段
// $.jqPopup({
// type: 1,
// title: '新闻详情',
// content: 'news-content.html #content',
// area: 'auto'
// });
// // 直接显示内容
// $.jqPopup({
// type: 0,
// title: '提示',
// content: '<p>操作成功！</p>',
// area: ['300px', '200px']
// });
})
</script>
</html>可以加载外部页面，可以加载外部页面的某一个div，也可以当作弹窗使用
jquery：
由于代码较多，封装成了一个小插件，下载地址：https://download.csdn.net/download/qq_25285531/91213262
https://download.csdn.net/download/qq_25285531/91213262
功能特点：
1、多种内容类型：支持直接内容、AJAX加载页面片段和iframe加载完整页面
2、自适应大小：支持固定尺寸和自动尺寸
3、关闭控制：支持按钮关闭和遮罩点击关闭
4、响应式：窗口大小改变时自动调整位置
5、滚动控制：可禁止背景页面滚动