Comment flou d'arrière-plan à l'aide de onclick Javascript?

Je veux ouvrir une petite fenêtre (j'ai que la partie programmée) qui affiche à l'écran, tandis que le navigateur/document/arrière-plan flou et de mise au point.

Exemple:

Je veux faire en sorte que lorsque j'appuie sur un bouton, 

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

il efface le fond - Que dois-je écrire dans "CODEHERE."

En passant, je suis en train de travailler dans Shopify.

Voici un exemple en image de ce que je veux qu'il ressemble:
Comment flou d'arrière-plan à l'aide de onclick Javascript?

  • Essentiellement, ce que vous essayez de faire est ceci:Comment puis-je placer une div basé sur des pourcentages avec les CSS mais avec l'effet de flou.
  • ce que tu veux dire en disant "flou"? Floue ou juste légèrement transparent-blanc?
  • Il suffit de prendre un coup d'oeil à la photo et vous devriez avoir une idée.
  • Qui ne s'appelle pas "le flou", RazeByte. Qui serait appelé "masque" (Photoshop terme) ou "opaque" (qui est un verbe aussi bien). Et en fait, je pense que la capture d'écran dans votre question est 'juste' alerte personnalisée avec un masquée/opaqued fenêtre d'affichage de la toile. Si vous souhaitez modifier votre titre/question en tant que tel, je vais aller à votre question, car la réponse par @CharlesJohnThompsonIII contient la plus économique de code que j'ai jamais vu de créer une telle alerte.
InformationsquelleAutor RazeByte | 2014-07-12
  1. 6

    Si vous souhaitez flouter l'arrière-plan, vous devez ajouter un css filtre flou de l'élément qui contient l'ensemble de votre contenu normal. En outre, il semble que vous souhaitez gris trop.

    Voici un lien vers le 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);
    }
};

    pour activer:

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

    pour désactiver:

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

    Ce sont les choses de base que vous auriez besoin de flou et gris le contenu de la main_container élément - si vous devez faire des ajustements en fonction des fonctionnalités supplémentaires que vous cherchez.

    • Inline JS est un signe clair de la mauvaise conception de code et c'est difficile à gérer.
    • êtes-vous juste me suivre autour de commentaire sur mon JS inline?
    • s'il vous plaît suggérer comment illustrer facilement d'un simple clic à l'action sans l'aide de JS inline, et sans l'aide de jQuery. Merci.
    • Non, je suis juste actives suivantes questions. Je voudrais écrire à personne. Ne pas prendre quoi que ce soit sur personnellement.
    • Je n'étais pas, pensé qu'il était drôle en fait. Mais sérieusement, est-il une alternative vous suggère de faire un rapide de l'illustration?
    • La capture d'écran dans la question en fait n'a pas de trouble, mais masqué/opaqued arrière-plan. Est en fait un des "juste" alerte personnalisée, je pense. Cela dit, votre code ne contient la méthode la plus économique que j'ai jamais vu, pour créer une telle alerte. Donc, bravo pour ça! Voir aussi la discussion sur la question.
    • J'ai remarqué que l'image n'est pas vraiment floue, mais l'OP a demandé en particulier que "le flou" j'ai donc prévu qu'en plus ils sont grisés/overlay

    InformationsquelleAutor Charles John Thompson III
  2. -1

    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";
};
};
    • Pourquoi devrait-il être deux fonctions distinctes? C'est assez redondant...
    InformationsquelleAutor alessandrio