-1

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: enter image description here

4
  • 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
    Jul 12, 2014 at 2:39
  • @Raze what you mean by saying "blur"? Blurred or just slightly transparent-white? Jul 12, 2014 at 2:58
  • Just take a look at the picture and you should get an idea.
    – RazeByte
    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. Jul 12, 2014 at 13:29

2 Answers 2

8

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.net/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.

7
  • Inline JS is a clear sign of bad code design and it's hardly maintainable. Jul 12, 2014 at 2:53
  • @RokoC.Buljan are you just following me around to comment on my inline JS?
    – CJT3
    Jul 12, 2014 at 2:54
  • @RokoC.Buljan please suggest how to easily illustrate a simple on click action without using inline JS, and without using jQuery. Thanks.
    – CJT3
    Jul 12, 2014 at 2:55
  • No, I'm just following active questions. I would write that to anyone. Don't take anything on SO personally. Jul 12, 2014 at 2:56
  • @RokoC.Buljan I wasn't, thought it was funny actually. But seriously, is there an alternative you'd suggest for a quick illustration?
    – CJT3
    Jul 12, 2014 at 3:10
-2

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";
};
};
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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