js封装函数实现iframe动态创建弹出层效果代码-html代码-BFW代码库

js封装函数实现iframe动态创建弹出层效果代码

代码语言：html

所属分类：弹出层

代码描述：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%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid #ccc;
            padding: 10px;
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            min-width: ${opts.width};
            min-height: ${opts.height};
        }
        #closeButton {
            position: absolute;
            top: 10px;
            right: 10px;
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: #888;
        }
        #closeButton:h.........完整代码请登录后点击上方下载按钮下载查看