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