How To make background blur when html popup modal opens?

jquery html css

13,178

Solution 1

you can also set property for body using before and after pseudo elements.

body:before{
    position:absolute;
    top : 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    content:"";
    pointer-events: none;
    z-index:100;
    opacity: .5
}

Solution 2

Set blur style for the container which behind the modal.

body.modal-open .container{
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
    filter: url("https://gist.githubusercontent.com/amitabhaghosh197/b7865b409e835b5a43b5/raw/1a255b551091924971e7dee8935fd38a7fdf7311/blur".svg#blur);
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='4');
}

demo

Solution 3

If you are using Boostrap then your content is already in some kind of container. So you can use CSS filter like this:

.modal-open .container {
    -webkit-filter: blur(5px) grayscale(90%);
    filter: blur(5px) grayscale(90%);
}

13,178

user

java developer

Updated on June 04, 2022

Comments

user 12 months

When I click on a button a popup opens so I want when the popup modal opens, background page gets blurred.

<div class="modal" id="myModal">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-body" style="max-height:500px;">
            <div class="panel-title text-center" style="width: 99%; padding: 1%;">
                <h1 class="title">Titels</h1>
                <hr style="border: 2px solid;"/>
            </div>
            <div class="table100 ver1 m-b-110">
                <div class="table100-body js-pscroll">
                    <table id="Table" class="display" style="width:100%">
                        <thead>
                        <tr class="row100 head">
                            <th style="text-align: center" class="cell100 column1">id</th>
                            <th style="text-align: center" class="cell100 column1">name</th>
                            <th style="text-align: center" class="cell100 column1">sname</th>
                            <th style="text-align: center" class="cell100 column1">dname</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-danger" id="close" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

This is my popup modal code but I don't know how to to make the background blur when this opens.

Thanveer Shah over 4 years

Its simple, You can use css blur property , I can design the code for you if you can post the whole thing.
user over 4 years

<body><div>some code</div> <div class="modal" id="myModal"> modal code</div></body>

user over 4 years

It makes the page blur from starting
Sethuraman over 4 years

you can create on div inside body and give same css to that div, show the div when modal opens and hide when modal close.
Quentin almost 2 years

There's no element in the HTML which that selector will match.
Quentin almost 2 years

Experimental vendor prefixed properties aren't recommended… because they are experimental. All major browsers support filter now anyway.