aktiv css auf klicken Sie mit Javascript und jquery ui

Question

Totally neu auf Javascript! Ich versuche, eine :active Klasse anzuwenden, wenn Sie auf das Fenster klicken. (Unschärfeeffekt) anstelle von modal Effekt.

Meine CSS:

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

Mein html:

<!-- popup --> 
     <div id="dialog" title="title"> 
     <h3><center>Text</center></h3> 
     </div> 
<!-- img -->  
<img class="blur" src="img/IMG_0125.png" alt="" width="100%"> 

Die javascript:

<link rel="stylesheet" href="jquery/css/jquery-ui.css" /> 
<!-- <script src="jquery/ui/jquery-ui.js"></script> --> 
<script src="jquery/ui/jquery-ui.min.js"></script> 

<script type="text/javascript"> 
     $(function(){ 
      $("#dialog").dialog({ 
       autoOpen: false, 
       modal: true, 
       bgiframe: true, 
       height: 350, 
       width: 400, 
       position: 'center', 
       show: { 
       effect: "fade", 
       duration: 1000 
       }, 
       hide: { 
       effect: "fade", 
       duration: 400 
       }, 
       resizable: false, 
       buttons: { 
        'OK': function() { 
         $(this).dialog('close'); 
        } 
       } 
      }); 
      $('#popup').click(function() { 
       $('#dialog').dialog('open'); 
      }); 
      /*The code works until here*/ 
      $('#popup').click(function(){ 
       $(this).parent().addClass('active').siblings().removeClass('active'); 
      }); 
     });  
    </script> 

Die jsfiddle Link: https://jsfiddle.net/5g9t5h2d/#

Ein Klick auf das Bild funktioniert, der Ima ge bluring, aber nicht wenn das Fenster erscheint: Wie verschwimme ich das Bild, wenn das Fenster erscheint?

Answer 1

gefunden Nur eine Lösung mit .blur.active { } in der CSS, und diesen Code:

$(function(){ 
      $("#dialog").dialog({ 
       autoOpen: false, 
       modal: false, 
       bgiframe: true, 
       height: 350, 
       width: 400, 
       position: 'center', 
       show: { 
       effect: "fade", 
       duration: 1000 
       }, 
       hide: { 
       effect: "fade", 
       duration: 400 
       }, 
       resizable: false, 
       buttons: { 
        'OK': function() { 
         $(this).dialog('close'); 
         $('.blur').removeClass('active'); 
         $(this).addClass('active'); 
        } 
       } 
      }); 
      $('#popup').click(function() { 
       $('#dialog').dialog('open'); 
      }); 
      $('#popup').click(function() { 
       $('.blur').addClass('active'); 
       $(this).removeClass('active'); 
      }); 
     }); 

Demo: https://jsfiddle.net/5g9t5h2d/2/

Dank alle für Ihre Hilfe!