js封装函数实现iframe动态创建弹出层效果代码
代码语言:html
所属分类:弹出层
代码描述:js封装函数实现iframe动态创建弹出层效果代码钮鼠标悬浮变形正方形动画效果代码
代码标签: js 封装 函数 iframe 动态 创建 弹出层
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
</head>
<body>
<div id="someContainer">
</div>
<script type="text/javascript">
function createIframePopup(url, options = {}) {
// 默认选项
const defaultOptions = {
width: '500px',
height: '400px',
appendTo: document.body,
title: '',
showCloseButton: true
};
// 合并选项
const opts = { ...defaultOptions, ...options };
// 检查是否已经存在弹出层
if (document.getElementById('popup')) {
var popup = document.getElementById('popup');
var iframe = document.getElementById('iframe');
popup.style.display = 'block';
iframe.src = url;
return;
}
// 创建弹出层的 CSS
var style = document.createElement('style');
style.textContent = `
#popup {
display: none;
position: fixed;
top: 50%;
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0