1

此对象的目的是在单击 div 时显示弹出窗口。在弹出窗口中,我想显示单击的 div 的 css 属性。我的问题是如何将 current.target.id 事件放入$("#container").css(this.css);替换 #container 的这一行,以便我为单击的每个元素检索不同的值

提前致谢

    $(function () {
    function popup(){
        var self = this;
        this.identifier;
        this.popupStatus = 0;
        this.css = ["width", "height", "color", "background-color"];

            $("#container > *").on('click', ':not(#popup)', function (e) 
            {
                if(event.target.id!=='backgroundPopup')
                {
                    e.stopPropagation()
                    self.centerPopup();
                    self.loadPopup();
                    self.cssAttr(); 
                }
            });

            $("#backgroundPopup").click(function()
            {
                console.log('backgroundPopup');
                self.disablePopup();
            });     

            $(document).keypress(function(e)
            {
                if(e.keyCode==27 && popupStatus==1)
                {
                    self.disablePopup();
                }
            });

          this.cssAttr = function (e){

            var html = ["Adjust the settings:"];
            //problem
            var styleProps = $("#container").css(this.css);
            console.log(styleProps);

            $.each( styleProps, function( prop, value ) {
                html.push( prop + ": " + value );
            });

            $( "#result" ).html( html.join( "<br>" ) );
            }


          this.loadPopup = function (){
            if(this.popupStatus==0)
            {
                console.log('loadPopup');
                $("#backgroundPopup").css(
                {
                    "opacity": "0.7"
                });
                $("#backgroundPopup").fadeIn("slow");
                $("#popupContact").fadeIn("slow");

            this.popupStatus = 1;
            }
        }

        this.disablePopup = function (){
            if(this.popupStatus==1)
            {
                console.log('disablePopup');
                $("#backgroundPopup").fadeOut("slow");
                $("#popupContact").fadeOut("slow");
                this.popupStatus = 0;
            }
        }

        this.centerPopup = function (){
            console.log('centerPopup');
            var windowWidth = document.documentElement.clientWidth;
            var windowHeight = document.documentElement.clientHeight;
            var popupHeight = $("#popupContact").height();
            var popupWidth = $("#popupContact").width();

            $("#popupContact").css(
            {
                "position": "absolute",
                "top": windowHeight/2-popupHeight/2,
                "left": windowWidth/2-popupWidth/2
            });

            $("#backgroundPopup").css(
            {
                "height": windowHeight
            });     
        }
    }
    var popup = new popup();
});
4

0 回答 0