active css on click using javascript and jquery ui

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 ?

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


Related Articles