单击“文本”后,我们将显示“弹出框”。
要求:
当用户单击外部弹出窗口时,我试图在此处隐藏弹出窗口: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;
}
慕桂英3389331
相关分类