I want to open a small window (I have that part programmed) which displays in the screen, while the browser/document/background blurs and goes out of focus.

Example:

I want to have it so that when I press a button,

 <a onclick = "CODEHERE" href="blah">Click Here</a>

it blurs the background - What do I write in "CODEHERE."

By the way, I am working in Shopify.

Here is an example image of what I want it to look like:

I want to open a small window (I have that part programmed) which displays in the screen, while the browser/document/background blurs and goes out of focus.

Example:

I want to have it so that when I press a button,

 <a onclick = "CODEHERE" href="blah">Click Here</a>

it blurs the background - What do I write in "CODEHERE."

By the way, I am working in Shopify.

Here is an example image of what I want it to look like:

• javascript
• html
• css

• Essentially what you're trying to do is this:How do I positioning a div based upon percentages with CSS but with blurring. – a coder Commented Jul 12, 2014 at 2:39
• @Raze what you mean by saying "blur"? Blurred or just slightly transparent-white? – Roko C. Buljan Commented Jul 12, 2014 at 2:58
• Just take a look at the picture and you should get an idea. – RazeByte Commented Jul 12, 2014 at 4:08
• That's not called "to blur", RazeByte. That would be called either "to mask" (Photoshop term) or "to opaque" (which is a verb as well). And actually, I would think that the screenshot in your question is one of 'just' a custom alert with a masked/opaqued viewport canvas. If you would edit your title/question as such, I'll 'up' your question, because the answer by @CharlesJohnThompsonIII contains the most economical code I've ever seen to create such an alert. – Frank Conijn - Support Ukraine Commented Jul 12, 2014 at 13:29

2 Answers 2

If you would like to blur the background, you would need to add a css blur filter to the element that contains all of your normal content. In addition, it looks like you want to grey it out too.

Here is a link to the jFiddle: http://jsfiddle/edMa4/6/

CSS

.blur   {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
}
#overlay    {
    position: fixed;
    display: none;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background: rgba(255,255,255,.8);
    z-index: 999;
}

JavaScript

var myBlurFunction = function(state) {
    /* state can be 1 or 0 */
    var containerElement = document.getElementById('main_container');
    var overlayEle = document.getElementById('overlay');

    if (state) {
        overlayEle.style.display = 'block';
        containerElement.setAttribute('class', 'blur');
    } else {
        overlayEle.style.display = 'none';
        containerElement.setAttribute('class', null);
    }
};

to activate:

<a href="javascript:myBlurFunction(1);">Blur</a>

to disable:

<a href="javascript:myBlurFunction(0);">No blur</a>

These are the basic things you'd need to blur and grey out the content of the main_container element - though you would need to make adjustments depending upon additional functionality you seek.

html

<div id='body'>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<button>Click Here</button>
</div>
<div class="blur"></div>
<div id='sh'>
<button id="close">X</button>
GET MORE FROM MINI X STYLE
</div>

css

#body{
    color:red;
    background:grey;
}
.blur{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,0.5);
    display:none;
}
#sh{
    position:absolute;
    display:none;
    top:50px;left:50px;bottom:50px;right:50px;
    background:rgba(255,0,0,0.5);
}

javascript

window.onload = function() {
var pup = document.getElementsByTagName('button')[0];
pup.onclick=function(){
document.getElementById('sh').style.display="block";
document.getElementsByClassName('blur')[0].style.display="block";
};
var close = document.getElementById('close');
close.onclick=function(){
document.getElementById('sh').style.display="none";
document.getElementsByClassName('blur')[0].style.display="none";
};
};