使用javascript和jqueryui点击激活css

active css on click using javascript and jquery ui

本文关键字：激活 css jqueryui javascript 使用更新时间：2023-11-17

javascript上的Totaly new！我正在尝试在单击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/#

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

刚刚在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/

谢谢大家的帮助！