使用javascript和jquery用户界面点击激活css

全新的javascript！ 我试图在单击ui窗口时应用一个

：active

类。（模糊效果），而不是模式效果

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

$（函数（）{
$（“#对话框”）。对话框({
自动打开：错误，
莫代尔：是的，
bgiframe：是的，
身高：350，
宽度：400，
位置：'中间'，
展示：{
效果：“褪色”，
持续时间：1000
},
隐藏：{
效果：“褪色”，
持续时间：400
}, 
可调整大小：false，
按钮：{
“确定”：函数（）{
$（this.dialog（'close'）；
}
}
});
$（'#弹出框'）。单击（函数（）{
$（'dialog'）。dialog（'open'）；
});
/*代码一直工作到这里*/
$（'#弹出框'）。单击（函数（）{
$（this）.parent（）.addClass（'active'）.sides（）.removeClass（'active'）；
});
});    

JSIDLE链接：

---

单击图像可以工作，图像会模糊，但窗口出现时不会：如何在窗口出现时模糊图像？

刚刚在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');
            });
        });

演示：

---

谢谢大家的帮助

你也可以共享来自JSFIDLE的链接吗？为什么既有jquery-ui.js又有jquery-ui.min.js？删除从未使用过的JSFIDLE，但我会尝试！好的，

jqueryui.js

已删除！谢谢，我正在学习：）你不能在图像上使用：active。假设您使用的是

addClass（'active'）

，那么您就有麻烦了：“活动”不是一个类。这是伪类。css过滤器中的Use.blur.active可以使用

transition

属性设置动画：）