1
votes

Comment rendre l'arrière-plan flou lorsque le modal popup html s'ouvre?

Lorsque je clique sur un bouton, une fenêtre contextuelle s'ouvre, donc je veux que lorsque la fenêtre modale s'ouvre, la page d'arrière-plan devient floue.

<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>

Voici mon code modal contextuel mais je ne sais pas comment rendre l'arrière-plan flou lorsque cela s'ouvre.

jquery html css

2 commentaires

C'est simple, vous pouvez utiliser la propriété css blur, je peux concevoir le code pour vous si vous pouvez publier le tout.

du code

5 Réponses :

0
votes

Vous pouvez définir l'opacité via CSS si vous utilisez le modal Bootstrap .

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

0 commentaires

1
votes

Si vous utilisez Bootstrap, votre contenu est déjà dans une sorte de conteneur . Vous pouvez donc utiliser le filtre CSS comme ceci:

.modal-open .container {
    -webkit-filter: blur(5px) grayscale(90%);
    filter: blur(5px) grayscale(90%);
}

0 commentaires

2
votes

Définissez le style de flou pour le conteneur derrière le 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');
}

démo

0 commentaires

1
votes

Essayez ceci, cela devrait fonctionner

.blur-filter {
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
}

` consultez ce CodePen pour plus de détails entrez la description du lien ici

0 commentaires

3
votes

vous pouvez également définir la propriété du corps en utilisant des pseudo éléments avant et après.

body:before{
    position:absolute;
    top : 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    content:"";
    pointer-events: none;
    z-index:100;
    opacity: .5

}

2 commentaires

Cela rend la page floue dès le départ

vous pouvez créer sur div à l'intérieur du corps et donner le même css à ce div, afficher le div lorsque modal s'ouvre et le masquer lors de la fermeture modale.