温馨提示×

window.showmodaldialog已废弃怎么办

小樊
82
2024-07-01 18:33:42
栏目: 智能运维

showmodaldialog方法已被废弃,推荐使用其他替代方法来实现类似的功能。一种替代方案是使用模态框库,比如Bootstrap Modal或者使用原生的JavaScript来创建自定义的模态框。

例如,可以使用以下代码来创建一个简单的模态框:

<!DOCTYPE html>
<html>
<head>
    <title>Modal Example</title>
    <style>
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1;
        }

        .modal-content {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>

<button onclick="openModal()">Open Modal</button>

<div id="myModal" class="modal">
    <div class="modal-content">
        <span onclick="closeModal()" style="float:right;">&times;</span>
        <p>This is a modal!</p>
    </div>
</div>

<script>
    function openModal() {
        document.getElementById("myModal").style.display = "block";
    }

    function closeModal() {
        document.getElementById("myModal").style.display = "none";
    }
</script>

</body>
</html>

这段代码创建了一个简单的模态框,点击按钮可以打开模态框,点击模态框的关闭按钮或者点击背景都可以关闭模态框。可以根据需要进行修改和定制。

0