javascript实现弹出层并显显示图文混排内容

在JavaScript中实现弹出层（通常称为模态框或提示框），可以利用原生的DOM操作或者轻量级的库如Popper.js、SweetAlert2等。这里我们提供一个简单的原生JavaScript示例，用于在鼠标悬停时展示图文混排内容：

<!-- HTML 结构 -->
<div id="parentElement" class="parent-element">
    <button onclick="showPopup()">悬停触发</button>
    <div id="overlay" class="overlay hidden"></div>
    <div id="popup" class="popup">
        <h3>标题</h3>
        <p>图文内容...<br>例如：图片<img src="your-image-url" /> 文字描述...</p>
    </div>
</div>

/* CSS 样式 */
.parent-element {
    position: relative;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 999;
}

.popup {
    position: absolute;
    display: none;
    width: 300px;
    padding: 20px;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.hidden {
    display: none;
}

// JavaScript 代码
function showPopup() {
    const overlay = document.getElementById("overlay");
    const popup = document.getElementById("popup");

    // 鼠标悬停时显示弹出层
    parentElement.addEventListener("mouseover", function () {
        overlay.classList.remove("hidden");
        popup.classList.remove("hidden");
    });

    // 鼠标移开时隐藏弹出层
    parentElement.addEventListener("mouseout", function () {
        overlay.classList.add("hidden");
        popup.classList.add("hidden");
    });
}

在这个例子中，当你点击按钮时，会触发`showPopup`函数，它会让覆盖层和弹出层显示。当鼠标离开`parentElement`时，它们会被隐藏。