使用javascript和jquery ui點擊活動css

Question

Totaly new on javascript！ 我試圖在點擊ui窗口時應用:active類。 （模糊效果），而不是modal的效果。

我的CSS：

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

我的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%"> 

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

的的jsfiddle鏈接：https://jsfiddle.net/5g9t5h2d/#

上的圖像作品的點擊， ima ge是模糊的，但不出現窗口時：窗口出現時如何模糊圖像？

Answer 1

剛剛發現與在CSS .blur.active { }的解決方案，而這個代碼：

$(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'); 
      }); 
     }); 

演示：https://jsfiddle.net/5g9t5h2d/2/

感謝所有您的幫助！