2

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.

2
  • Its simple, You can use css blur property , I can design the code for you if you can post the whole thing. Jan 10, 2019 at 6:16
  • <body><div>some code</div> <div class="modal" id="myModal"> modal code</div></body>
    – user
    Jan 10, 2019 at 7:04

5 Answers 5

4

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

}
2
  • It makes the page blur from starting
    – user
    Jan 10, 2019 at 9:04
  • 2
    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.
    – Sethuraman
    Jan 10, 2019 at 11:11
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

1

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%);
}
0
0

You can set the opacity via CSS if you are using Bootstrap modal.

.modal-backdrop
{
    opacity:0.5 !important;
}
0

Try this out, it should work

.blur-filter {
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
}

check out this CodePen for more details enter link description here

2
  • There's no element in the HTML which that selector will match.
    – Quentin
    Jun 8, 2021 at 15:34
  • Experimental vendor prefixed properties aren't recommended… because they are experimental. All major browsers support filter now anyway.
    – Quentin
    Jun 8, 2021 at 15:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.