If there is any good way to achieve it, click on other areas to hide the current product pop-up window.

clipboard.png

X

document X ; document

clipboard.png

the environmental background of the problems and what methods you have tried

I have tried these methods:
a. Turn it off wherever you click: 

$(document).mouseup(function(e){
          var _con = $(".show-item");   // 
          var _son = $(".coming-soon-warp");
          if(!_con.is(e.target) && _con.has(e.target).length === 0){
            $(".show-item").removeClass("show");
            $(".pro-contet").removeClass("scale-one");
          };
          
          if(!_son.is(e.target) && _son.has(e.target).length === 0){
            $(".coming-soon-warp").removeClass("show");
            $(".pro-contet").removeClass("scale-one");
          };
        });

b. As long as this method exists, none of the other methods in this range will work 

$(document).click(function (e) {
            var target = $(e.target);
            console.log(target);
            if (!target.hasClass("show-item") && target.closest(".show-item").length <= 0) {
               $(".show-item").removeClass("show");
            }

        });

what result do you expect? What is the error message actually seen? 

1.   .show-item 
2.  .show-item X 
3.  .show-item  
4. .show-item  learn more  

:
<body>
    <div class="locksys">
        <div class="house">
            //
            <a class="hight-light lever" data-item="Lever" data-name="UL3" style="left:24%;top:43%;"></a>
            ...
            
            //
            <!--hight-light -->
            <div class="show-item" data-pro="UL3">
                <b class="close"></b>
                <div class="pro-contet">
                    <img src="<?php echo Yii::app()->baseUrl;?>/images/home/ul3.png" alt="" class="item-pic" />
                    <div class="more">
                        <div class="discirption">
                            <h4>Ultraloq UL3 BT</h4>
                            
5-in-1 Smart Lever Lock

                            <div class="icon-list">
                                <span class="icon-utec-ul1-fingerprint house-icon"></span>
                                <span class="icon-utec-app house-icon"></span>
                                <span class="icon-utec-key house-icon"></span>
                                <span class="icon-utec-code house-icon"></span>
                            </div>
                            <a href="<?php echo Yii::app()->createUrl("lock/ul3/bt");?>" class="button home-btn">Learn more</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

is there any good way to achieve points 3 and 4?

Jquery
Jul.28,2021

1. You can add a transparent mask layer and click on this mask layer to close the pop-up box
level should be: document < mask layer < pop-up box
2. The reason why you click anywhere will trigger because you click on something in the show-item area document event to trigger document event. Just add event.stopPropagation () to the click event of show-item to prevent the event from passing

.

/ * 

     * documentdocument2:
     * 1. productIsOpen=false;
     * 2. document  productIsOpen  document  productIsOpen = true;
     * 3. document 
     *         a.  productIsOpen productIsOpen=true 
     *         b.    show-item!target.hasClass('show-item') && target.closest('.show-item').length <= 0true productIsOpen=false; ...
     * 4. .close  show-item target.hasClass('close') true productIsOpen=false; ...
     */
var productIsOpen = false;
        $('.house').on('click','.hight-light',function(){
            var proName = $(this).attr('data-name');
            var target = $('.show-item[data-pro="'+proName+'"]');
            target.addClass('show');
            jQuery('.pro-contet', target).addClass('scale-one');
            setTimeout(function(){
                productIsOpen = true;
            }, 500);
        });
        
        //
        $(document).bind("click",function(e){ 
            var target = $(e.target);
            if(productIsOpen){
                if(!target.hasClass('show-item') && target.closest('.show-item').length <= 0){
                    productIsOpen = false
                   $('.show-item').removeClass("show");
                   jQuery('.pro-contet', $('.show-item')).removeClass('scale-one');
                }else if(target.hasClass('close')){
                    productIsOpen = false
                   $('.show-item').removeClass("show");
                   jQuery('.pro-contet', $('.show-item')).removeClass('scale-one');
                }
            }
        });

embed the product into a full screen transparent mask layer, which is turned off when the mouse clicks on the transparent mask layer

Previous: How to realize data transfer in slot

Next: Two computer screens, can you click the button on one screen and pop up a window to the other screen?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e5d6f7-44464.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e5d6f7-44464.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?