猿问

隐藏在外部弹出onclick

单击“文本”后,我们将显示“弹出框”。


要求:


当用户单击外部弹出窗口时,我试图在此处隐藏弹出窗口:https : //codepen.io/kidsdial/pen/VNxMYO ....


问题:


为此,我尝试下面的代码,但是在此之后,当我尝试通过dropdown更改字体系列时,弹出窗口将关闭...。


$(document).mouseup(function(e) 

    {

        var container = $('.white_content');


        if (!container.is(e.target) && container.has(e.target).length === 0) 

        {

            container.hide();           

            $('.font-select').css('display', 'none'); 

        }

    }); 

.container {

      background: silver;

      position: relative;

    }


    .container img {

      position: absolute;

      top: 0;

      bottom: 250px;

      left: 0;

      right: 0;

      margin: auto;

      z-index: 999;

    }


    .masked-img {

      overflow: hidden;

      position: relative;

    }


    .txtContainer {

      position: absolute;

      text-align: center;

      color: #FFF

    }


    .txtContainer:hover {

      background: red;

      padding: 1px;

      border-style: dotted;

    }


    .pip {

      display: inline-block;

      margin: 0;

      position: absolute;

    }


    .remove {

      background: #444;

      border: 1px solid black;

      color: white;

      text-align: center;

      cursor: pointer;

      position: absolute;

      z-index: 3;

    }


    .remove:hover {

      background: white;

      color: black;

    }


    .edit {

      display: block;

      background: #444;

      border: 1px solid black;

      color: white;

      text-align: center;

      cursor: pointer;

      position: absolute;

      z-index: 3;

    }


    .edit:hover {

      background: white;

      color: black;

      position: absolute;

      z-index: 3;

    }


    .white_content {

      display: none;

      position: absolute;

      top: 25%;

      left: 25%;

      width: 50%;

      height: 50%;

      padding: 16px;

      border: 16px solid orange;

      background-color: white;

      z-index: 1002;

      overflow: auto;

    }

弑天下
浏览 171回答 2
2回答

慕桂英3389331

无需执行任何操作,只需将您的下拉菜单添加到您的菜单中即可container var解决问题var container = $('.white_content, .font-select');现在,当您选择下拉菜单时,弹出窗口不会关闭
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答