使用javascript和jquery ui在點擊時激活CSS

Question

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/#

單擊圖像有效，圖像模糊，但是當窗口出現時不模糊：如何在窗口出現時使圖像模糊？

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/

感謝你的幫助 ！