如何在Web页面上模拟MsgBox效果

来源：佚名编辑：佚名

2024-07-01 14:32:04

要在Web页面上模拟MsgBox效果，您可以使用JavaScript和CSS来创建一个弹窗。以下是一个简单的示例代码：

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>MsgBox Simulation</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <button onclick="showMsgBox()">Show MsgBox</button>
    <div id="msgBox" class="msgBox">
        <div class="msgContent">
            <p>This is a message box</p>
            <button onclick="closeMsgBox()">Close</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (style.css)：

.msgBox {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #ccc;
}

.msgContent {
    text-align: center;
}

JavaScript (script.js)：

function showMsgBox() {
    document.getElementById('msgBox').style.display = 'block';
}

function closeMsgBox() {
    document.getElementById('msgBox').style.display = 'none';
}