js封装函数弹出iframe层效果代码-html代码-BFW代码库

js封装函数弹出iframe层效果代码

代码语言：html

所属分类：弹出层

代码描述：js封装函数弹出iframe层效果代码，点击关闭按钮可关闭弹出层。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
</head>
<body>
    <button id="createButton">Create Iframe</button>

    <script>
        function createIframePopup(url) {
            // 检查是否已经存在弹出层
            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: 500px;
                    min-height: 400px;
                }
                #closeButton {
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    background: none;
                    border: none;
                    font-size: 20px;
                    cursor: pointer;
      .........完整代码请登录后点击上方下载按钮下载查看