Make modal dialog with blur background using Bootstrap

bysemicon -
0

 


Demo: https://semicon.github.io/codedemo/modal_bg_blur.html

Page css blurs background

        .background {
            background: url("https://s3.amazonaws.com/wtc2/school_uploads/images/000/000/187/large/Lexington_Skyline.jpg") no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            height: 100vh;
            width: 100%;
            z-index: -100;
            position: absolute;
        }

        .blur {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(3px);
            height: 100vh;
            width: 100%;
            z-index: -99;
            position: absolute;
        }

Modal css blurs background

        .modal-open .content {
            -webkit-filter: blur(5px);
            -moz-filter: blur(5px);
            -o-filter: blur(5px);
            -ms-filter: blur(5px);
            filter: blur(5px);
        }

ตัวอย่าง


<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        html,
        body {
            margin: 0;
            height: 100%;
            overflow: hidden;
        }

        body {
            background: transparent;
        }

        .background {
            background: url("https://s3.amazonaws.com/wtc2/school_uploads/images/000/000/187/large/Lexington_Skyline.jpg") no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            height: 100vh;
            width: 100%;
            z-index: -100;
            position: absolute;
        }

        .blur {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(3px);
            height: 100vh;
            width: 100%;
            z-index: -99;
            position: absolute;
        }

        .modal-open .content {
            -webkit-filter: blur(5px);
            -moz-filter: blur(5px);
            -o-filter: blur(5px);
            -ms-filter: blur(5px);
            filter: blur(5px);
        }
    </style>
</head>

<body>

    <div class="content text-center">
        <div class="background">
            <div class="blur"></div>
        </div>

        <h1>Hello, world!</h1>

        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
            Launch static backdrop modal
        </button>

    </div>


    <!-- Modal -->
    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Understood</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Ref. https://blog.prototypr.io/ , https://stackoverflow.com/

Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า