用js自定义弹窗

 

用js自定义弹窗

代码如下:

DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    <style>

        .popup {
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, .5);
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            display: none;
            justify-content: center;
            align-items: center;
        }

        .popup-content {
            width: 400px;
            height: 200px;
            background-color: #fff;
            box-sizing: border-box;
            padding: 10px 30px;
            color: black;
        }

        .top {
            width: 100%;
            border-bottom: 1px solid black;
        }

        .info {
            margin-top: 50px;
        }

    style>
    <script>
        //给定一个值,使点 确定按钮 为 true,点其他为 false
        var isDelete = false;
        //显示弹窗函数,设置display为flex
        function showPopup() {
            document.getElementById("popup").style.display = "flex";
        }

     //显示弹窗函数,设置display为none,传一个参数,把true和false传进去
        function hidePopup(x, e) {
            //处理冒泡,event 的 cancelable 事件返回一个布尔值 
            // 确定按钮有event参数,不会返回undefined(因为取消和其他区域,没传值 默认undefined)
            if (e != undefined) {
                e.cancelBubble = true;
            }
            document.getElementById("popup").style.display = "none";
            isDelete = x;
            console.log(x);
        }
    script>
head>
<body>

<button type="button" onclick="showPopup()">弹窗button>



<div class="popup" id="popup" onclick="hidePopup(false)">
    <div class="popup-content">
        <div class="top">
            <p>提示信息p>
        div>
        <div class="info">
            <p>确认关闭?p>
        div>
        <div class="btn">
            
            <button type="button" onclick="hidePopup(true,event)">确定button>
            <button type="button" onclick="hidePopup(false)">取消button>
        div>
    div>
div>


div>

body>
html>

 

转载于:https://www.cnblogs.com/here-I-am/p/11453180.html

你可能感兴趣的:(用js自定义弹窗)