Apply the Blur effect to the floating box bottom

Question

Apply the Blur effect to the floating box bottom

Navigation

#1 by (4 votes)
#2 by (1 votes)

1

I have a simple function in jscript that opens a floating box, but when the floating box opens I wanted the background to have the blur effect, but I can not leave the background with this effect, I already tried several methods and I was not successful.

I've tried everything, the only thing I got was it leaves the background with the dark color, but the effect 'filter: blur (2px);' does not 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>

html css

asked by anonymous 03.11.2018 / 03:19

2 answers

1

Good evening!

I did not quite understand your question, but from the analysis, you are applying the blur filter on the div that is above the content, and blurring all content, so it is not working. I believe separating the background that will receive the filter from the message container 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>

03.11.2018 / 05:00

Do not fill new column as Null and yes with specific value in the script How to transform content from a dictionary file into Python?

score 4 · Accepted Answer

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

The idea here is when the modal is open, you put a class in container and everything in it stays with filter:blur minus the element that has 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><scriptsrc="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><scriptsrc="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 might interest you, in it I did the inverse effect, it starts with everything blurred with filter:blur , then when I click on a .btn the blur is removed from the background and things are clear.