CODEWITHSUNDEEP
jqueryhtmlcss
user
user

Reputation: 427

How To make background blur when html popup modal opens?

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.

Upvotes: 2

Views: 20916

Answers (6)

Dan
Dan

Reputation: 11

Novice programmer here. I'm sure there is unnecessary code here and some bad practices, but this is how I got the background page with all elements to deactivate and blur when opening an unblurred popup. Basically, all elements in the original page are in one div (mainpage) and the popup modal is in its own div (popup). I hope this helps someone else who needs to be walked thru the basics.

CSS:

.mainpage {
}
.popup {
  display: none;
  position: absolute;
  top: 40%;
  left: 40%;
  width: 20%;
  height: 40%;
  padding: 20px;
  background-color: rgb(181, 43, 43);
  border: 1px solid #ccc;
  text-align: center;
  filter: blur(0px);
}
.blur {
  filter: blur(2px);
}
.unblur {
  filter: none;

HTML:

<body style='background-color: #9999cf'>
<div id='mainpage'>
  <h1><br>Operation Screen</h1>
  <button id='openPopup'>Open Popup</button>
</div>
<div id='popup' class='popup'>
  <h2>Popup</h2>
  <button id='closePopup' onclick='closePopup()'>Close Popup</button>
  <button onclick='applyBlur()'>Apply Blur to Original Page</button>
  <button onclick='removeBlur()'>Remove Blur</button>
</div>

Script:

function closePopup() 
{
  document.getElementById('popup').style.display = 'none';
  var elements = document.querySelectorAll('#mainpage *'); 
  elements.forEach(function(element) {element.disabled = false;});
  document.body.style.overflow = 'auto';
  removeBlur();
}
function applyBlur() 
{
  var elements = document.querySelectorAll('#mainpage *');
  elements.forEach(function(element) {element.classList.add('blur');});
}
function removeBlur() 
{
  var elements = document.querySelectorAll('#mainpage *');
  elements.forEach(function(element) {element.classList.remove('blur');});
}
document.getElementById('openPopup').addEventListener('click', function() {
  var elements = document.querySelectorAll('#mainpage *');
  elements.forEach(function(element) {element.disabled = true;});
  document.getElementById('popup').style.display = 'block';
  document.body.style.overflow = 'hidden';
  applyBlur();
});

Upvotes: 1

Remon
Remon

Reputation: 9

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

Upvotes: 0

Sethuraman
Sethuraman

Reputation: 651

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

}

Upvotes: 5

Balaji731
Balaji731

Reputation: 1129

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

Upvotes: 2

Mordecai
Mordecai

Reputation: 1494

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

Upvotes: 1

Jayson
Jayson

Reputation: 1109

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

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

Upvotes: 0

Related Questions