如何修复单击按钮以显示弹出内容并单击元素区域以关闭弹出窗口jquery

Question

使用Jquery

尝试设置代码时遇到问题

我想要点击按钮，弹出内容会显示，当我点击内容弹出区域时，弹出窗口已关闭。

但我的代码有问题。 帮助我...

我的代码在这里：

<button class="popup_dangky"></button>

<!-- show popup -->
<div id="thim-popup-login" class="has-shortcode">
    content popup 
</div>


<script type="text/javascript">
/*  jQuery(document).ready(function(){*/
        jQuery('button.popup_dangky').click(function() {
            jQuery("div.has-shortcode").addClass("active");
        });

        jQuery("html").click(function(e){
                jQuery(".has-shortcode").removeClass("active");
        });
/*  });*/
</script>

Answer 1

当您点击onSubmit() { if (this.formModel.valid) { this.submitted = false; this.result = false; lens id = this.formModel.controls['id'].value; this.productService.getProductOne(id).subscribe( (product) => { this.product = product; //Check to see if object undefined if (this.product) { if (this.product.id != 0) { this.submitted = true; } else { this.result = true; } } }); } } 时，button点击事件也会同时触发。 下面是更新的代码。

html

  jQuery(document).ready(function(){
        jQuery('button.popup_dangky').click(function() {
            jQuery("div.has-shortcode").addClass("active");
        });

       /* jQuery("html").click(function(e){
                jQuery(".has-shortcode").removeClass("active");
        });*/
        
        
        
        jQuery(document).mouseup(function (e)
          {
            var container = jQuery(".has-shortcode");

            if (!container.is(e.target) // if the target of the click isn't the container...
              && container.has(e.target).length === 0) // ... nor a descendant of the container
            {
              container.removeClass('active');
            }
	});
        
  });

.has-shortcode{
  display:none
}
.active{
  display:inline !important;
}