使用javascript和jquery ui在点击时激活CSS

Question

Totaly new on javascript ! I'm trying to apply a :active class when clicking on ui window. (blur effect), instead of modal effect.

My css:

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

My 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%">

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

The jsfiddle link: https://jsfiddle.net/5g9t5h2d/#

A click on the image works, the image is bluring, but not when the window appear: How to blur the image when the window appear ?

Answer 1

Just found a solution with .blur.active { } in the css, and this 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/

Thanks all for your help !