Apply the Blur effect to the floating box background

Question

Apply the Blur effect to the floating box background

Asked 6 years ago

Viewed 724 times

1

I have a simple jscript function that opens a floating box, but when the floating box opens I wanted the background to be with the Blur effect, only I can’t leave the background with this effect, I’ve tried several Google methods and I was unsuccessful.

I’ve tried everything, the only thing I’ve managed is to leave the background with the dark color, but the effect 'filter: Blur(2px);' doesn’t seem to work.

body > #widgetNotify {
    filter: blur(0px);
}
body > * {
    transition: filter 0.2s linear;
}

#widgetNotify {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999999;
    display: none;
    justify-content: center;
    align-items: center;
    background: #00000094;
}

#widgetNotify::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

#widgetNotify * {
    box-sizing: border-box
}

#widgetNotify .widget {
    width: 100%;
    position: relative;
    font-family: "UOLText", "UOLTextRegular", Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-transform: none;
    margin: 0;
    box-sizing: border-box
}

#widgetNotify .widget * {
    outline: 0
}

#widgetNotify .widget .messagesContainer {
    background-color: #fff;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: left;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    -webkit-box-shadow: 0 1px 10px 1px rgba(76, 76, 76, 0.3);
    -moz-box-shadow: 0 1px 10px 1px rgba(76, 76, 76, 0.3);
    -o-box-shadow: 0 1px 10px 1px rgba(76, 76, 76, 0.3);
    box-shadow: 0 1px 10px 1px rgba(76, 76, 76, 0.3);
    margin-top: 7px;
    z-index: 6000001;
    line-height: 1.2
}

#widgetNotify .widget.opened .messagesContainer {
    opacity: 1;
    visibility: visible
}

#widgetNotify .widget .messagesContainer.loginbox {
    height: 100%;
    top: 0;
    margin-top: 0
}

#widgetNotify .widget.widget-template-desktop .messagesContainer.loginbox {
    top: 100% !important;
    position: absolute;
    max-height: 405px;
    height: 100px;
    width: 100px;
    min-width: 200px;
    min-height: 200px;
}

#widgetNotify .widget.widget-template-desktop .messagesContainer.loginbox {
    height: 100%;
    border: solid 1px #e6e6e6;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    margin-left: -305px !important;
    margin-top: -222.5px !important;
    max-width: 100px;
    max-height: 100px;
    border-radius: 2px;
}

#widgetNotify .widget.widget-template-desktop .messagesContainer.loginbox::after {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: .8;
    z-index: -1;
}

#widgetNotify .widget.widget-template-desktop .messagesContainer {
    width: 100px;
    height: 100px;
    min-height: 100px;
    max-height: 100px;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 7px
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="widgetNotify" class="widgetNotify" style="display: block;">
   <div class="widget widget-template-desktop opened widget-align-right">
       <div class="messagesContainer loginbox modal-login manual-modal-login"></div>
   </div>
</div>
</body>
</html>

you will need to make a javascript call to when calling the box leave the other elements with the following css effect: . Blur{ -Webkit-filter: Blur(5px); /* Safari 6.0 - 9.0 */ filter: Blur(5px); }

– Helton Fábio

2018/11/03 at 06:18

2 answers

4

Dude I made an adaptation of that code and I used Bootstrap only to take advantage of the Modal script. But the idea vc can easily adapt to your project if you use jQuery!

The idea here is when the modal is open, you put a class in the container and everything inside gets filter:blur minus the element having the class .modal

See how it looks in the example.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<style>
.firstBlur {
  margin:20px 20px 0;
  padding:20px;
  position:relative;
}
/* coloque blur em todos os elementos menos no elemento com a class .modal */
.firstBlur.modalBlur > *:not(.modal) {
  -webkit-filter: blur(8px);
  filter: blur(8px);
}
/* remove a cor escurecida do fundo, se quiser que fique escurecido ajuste a opacidade para 0.5*/
.modal-backdrop.show {
  opacity: 0;
}
</style>
</head>

<body>

    <div class="firstBlur">
        <h2>What is Lorem Ipsum?</h2>
        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
            industry's standard
        </p>

        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
            Abrir modal
        </button>

        <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle"
            aria-hidden="true" data-backdrop="true" data-keyboard="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">Modal Body</div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>

    <script>
        (function () {
            //Show Modal
            $('#exampleModalLong').on('show.bs.modal', function (e) {
                $('.firstBlur').addClass('modalBlur');
            })
            //Remove modal
            $('#exampleModalLong').on('hide.bs.modal', function (e) {
                $('.firstBlur').removeClass('modalBlur');
            })
        })();
    </script>
    
</body>

</html>

OBS: This answer may interest you, in it I did the effect in reverse, begins with everything blurred with filter:blur, after clicking on a .btn the blur is removed from the background and things become clear.

1

thanks, misses this I was looking for, I will adapt in my template.

– Vitor Hugo

2018/11/04 at 16:41
1

@Vitorhugo cool that solved, the trick is to put the class in the father and when the father has this class all the children stay with Blur, the main here is the CSS more than the rss script, so be careful when organizing the CSS, good luck ai tmj

– hugocsl

2018/11/04 at 18:17

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by Ismael SIlva • **248** points · Answer 1 · 2018-11-03T04:00:43+00:00

Good night!

I didn’t quite understand your question, but from what I’m looking at, you’re applying the Blur filter to the div that’s above the content, and blurring all the content, so it’s not working. I believe that separating the background that will receive the filter, the container of the message will be better.

For example:

#widgetNotify::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

#widgetNotify * {
    box-sizing: border-box
}

#widgetNotify .widget {
    width: 100%;
    position: relative;
    font-family: "UOLText", "UOLTextRegular", Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-transform: none;
    margin: 0;
    box-sizing: border-box
}

#widgetNotify .widget * {
    outline: 0
}

#widgetNotify .widget .messagesContainer {
    background-color: #fff;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: left;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    -webkit-box-shadow: 0 1px 10px 1px rgba(76, 76, 76, 0.3);
    -moz-box-shadow: 0 1px 10px 1px rgba(76, 76, 76, 0.3);
    -o-box-shadow: 0 1px 10px 1px rgba(76, 76, 76, 0.3);
    box-shadow: 0 1px 10px 1px rgba(76, 76, 76, 0.3);
    margin-top: 7px;
    z-index: 6000001;
    line-height: 1.2
}

#widgetNotify .widget.opened .messagesContainer {
    opacity: 1;
    visibility: visible
}

#widgetNotify .widget .messagesContainer.loginbox {
    height: 100%;
    top: 0;
    margin-top: 0
}

#widgetNotify .widget.widget-template-desktop .messagesContainer.loginbox {
    top: 100% !important;
    position: absolute;
    max-height: 405px;
    height: 100px;
    width: 100px;
    min-width: 200px;
    min-height: 200px;
}

#widgetNotify .widget.widget-template-desktop .messagesContainer.loginbox {
    height: 100%;
    border: solid 1px #e6e6e6;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    margin-left: -305px !important;
    margin-top: -222.5px !important;
    max-width: 100px;
    max-height: 100px;
    border-radius: 2px;
}

#widgetNotify .widget.widget-template-desktop .messagesContainer.loginbox::after {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: .8;
    z-index: -1;
}

#widgetNotify .widget.widget-template-desktop .messagesContainer {
    width: 100px;
    height: 100px;
    min-height: 100px;
    max-height: 100px;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 7px
}

.box-background-blur {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    filter: blur(5px);
    z-index: 999;
    background: #00000094;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Trabalho do Forum</title>
</head>
<body>
    <div id="widgetNotify" class="widgetNotify" style="display: block;">
        <div class="widget widget-template-desktop opened widget-align-right">
            <div class="messagesContainer loginbox modal-login manual-modal-login">
                <p>
                    Exemplo
                </p>
            </div>
        </div>
    </div>
    <div class="box-background-blur"></div>
</body>
</html>