JS实现弹出居中的模式窗口示例

下面我将为你详细讲解“JS实现弹出居中的模式窗口示例”的完整攻略，过程中将会包含两条示例说明。

JS实现弹出居中的模式窗口示例的攻略

1. 利用CSS设置模式窗口样式

为了实现弹出居中的模式窗口，我们需要为模式窗口设置样式。代码如下：

#popup_box {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 300px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 99999;
    display: none;
}

2. 使用JavaScript实现弹出模式窗口

在JS中，我们需要根据用户的行为触发模式窗口的显示和隐藏。在示例中，我们使用了点击按钮的方式触发模式窗口的显示。代码如下：

// 显示模式窗口
function showPopup() {
    var popupBox = document.getElementById('popup_box');
    popupBox.style.display = 'block';
}

// 隐藏模式窗口
function hidePopup() {
    var popupBox = document.getElementById('popup_box');
    popupBox.style.display = 'none';
}

// 获取触发模式窗口显示的按钮，并绑定点击事件
var showPopupBtn = document.getElementById('show_popup');
showPopupBtn.addEventListener('click', showPopup);

// 获取触发模式窗口隐藏的按钮，并绑定点击事件
var hidePopupBtn = document.getElementById('hide_popup');
hidePopupBtn.addEventListener('click', hidePopup);

3. 示例1：简单的登录模式窗口

在示例1中，我们实现了一个简单的登录模式窗口。用户可以在模式窗口中输入用户名和密码进行登录。当用户输入完成后，可以点击“登录”按钮进行提交。代码如下：

<!-- 显示模式窗口的按钮 -->
<button id="show_popup">登录</button>

<!-- 模式窗口 -->
<div id="popup_box">
    <!-- 模式窗口的标题 -->
    <h2>登录</h2>
    <!-- 输入框 -->
    <input type="text" placeholder="用户名">
    <input type="password" placeholder="密码">
    <br>
    <!-- 提交按钮 -->
    <button>登录</button>
    <!-- 隐藏模式窗口的按钮 -->
    <button id="hide_popup">取消</button>
</div>

下面是示例1的完整代码和DEMO演示效果：示例1

4. 示例2：带有图片和描述的模式窗口

在示例2中，我们实现了一个带有图片和描述的模式窗口。用户可以在模式窗口中看到狗狗的图片和描述文字。代码如下：

<!-- 显示模式窗口的按钮 -->
<button id="show_popup">查看狗狗</button>

<!-- 模式窗口 -->
<div id="popup_box">
    <!-- 模式窗口的标题 -->
    <h2>可爱的狗狗</h2>
    <!-- 狗狗的图片 -->
    <img src="https://images.pexels.com/photos/589970/pexels-photo-589970.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="可爱的狗狗">
    <!-- 狗狗的描述文字 -->
    <p>这是一只又聪明又可爱的狗狗，它始终用它那善良的性格感染着周围的人们。</p>
    <!-- 隐藏模式窗口的按钮 -->
    <button id="hide_popup">关闭</button>
</div>

下面是示例2的完整代码和DEMO演示效果：示例2

以上就是本文的完整攻略，希望能对你有所帮助。