我正在尝试执行一个 jquery 代码，其中通过单击显示一个按钮并通过单击该按钮显示一个弹出窗口，而弹出窗口打开我也想通过关闭它不应该显示的弹出窗口来隐藏该按钮.我的意思是它应该回到初始状态。
这是我的代码:
$(function() { // DOM loaded
var mouseX;
var mouseY;
$(document).mousemove(function(f){
mouseX = f.pageX;
mouseY = f.pageY;
});
var openPopup = function(e) { // Function to open the popup
$(e).fadeIn(400);
$('#mask, .popupinfo').fadeIn(400).css({'top':mouseY, 'left':mouseX}).draggable({ containment: "body" });
$('#mask').css({'top': 0, 'left': 0});
$('a.open').hide();
};
var closePopup = function() { // Function to close the popup
$('#mask, .popupinfo').fadeOut(400);
$('a.open').show();
};
$('body').click(function(){
$('a.open').css({'top':mouseY, 'left':mouseX}).fadeIn(400).click(function(e){
e.preventDefault();
var popupbox = $(this).attr('href');
openPopup(popupbox);
$('#editable').attr('contenteditable','true');
});
});
$('#mask').on('click', function() {
closePopup();
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
closePopup();
}
});
});
HTML 文件:
<body>
<div id="mask"></div>
<div class="clearfix">
<a href="#popup-box" style="display: none;" class="btn btn-circle btn-sm default open">
Open <i class="fa fa-user"></i>
</a>
</div>
<div id="editable">This is the content editable where I can change fonts and edit text</div>
<div id="popup-box" class="popupinfo" data-nitseditor="1">
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i> Text Editor
</div>
<div class="tools">
<a href="" class="remove">
</a>
</div>
</div>
<div class="portlet-body form">
<form role="form">
<div class="form-body">
<div class="form-group">
<label>Style Select</label>
<div class="input-group">
<span class="input-group-addon input-circle-left">
<i class="fa fa-magic"></i>
</span>
<input type="text" class="form-control input-circle-right" placeholder="Select style">
</div>
</div>
<div class="form-group">
<label>Style font</label>
<div class="input-group">
<span class="input-group-addon input-circle-left">
<i class="fa fa-font"></i>
</span>
<input type="text" class="form-control input-circle-right" placeholder="Select font">
</div>
</div>
<div class="form-group">
<div>Font Size (px)</div>
<div id="slider-range-min" class="slider bg-yellow">
</div>
<div class="slider-value">
Minimum Value: <span class="slider-value" id="slider-range-min-amount">
</span>
</div>
</div>
<div class="form-group">
<label>Left Icon(.input-sm)</label>
<div class="input-icon input-icon-sm">
<i class="fa fa-bell-o"></i>
<input type="text" class="form-control input-sm" placeholder="Left icon">
</div>
</div>
<div class="form-group">
<label>Left Icon(.input-lg)</label>
<div class="input-icon input-icon-lg">
<i class="fa fa-bell-o"></i>
<input type="text" class="form-control input-lg" placeholder="Left icon">
</div>
</div>
<div class="form-group">
<label>Dropdown</label>
<select class="form-control">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</div>
<div class="clearfix">
<a href="javascript:;" class="btn btn-icon-only default">
<i class="fa fa-user"></i>
</a>
<a href="javascript:;" class="btn btn-icon-only default">
<i class="fa fa-user"></i>
</a>
<a href="javascript:;" class="btn btn-icon-only default">
<i class="fa fa-user"></i>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
即使通过拖动弹出按钮也是可见的。请帮我解决这个问题。
最佳答案
改变这个:
$(function() { // DOM loaded
var mouseX;
var mouseY;
var modal = false;
$(document).mousemove(function(f){
mouseX = f.pageX;
mouseY = f.pageY;
});
var openPopup = function(e) { // Function to open the popup
$(e).fadeIn(400);
$('#mask, .popupinfo').fadeIn(400).css({'top':mouseY, 'left':mouseX}).draggable({ containment: "body" });
$('#mask').css({'top': 0, 'left': 0});
$('a.open').hide();
};
var closePopup = function() { // Function to close the popup
$('#mask, .popupinfo').fadeOut(400);
$('a.open').show();
};
$('body').click(function(e){
if (modal == false) {
modal = true;
$('a.open').css({'top':mouseY, 'left':mouseX}).fadeIn(400).click(function(e){
e.preventDefault();
var popupbox = $(this).attr('href');
openPopup(popupbox);
$('#editable').attr('contenteditable','true');
});
}
});
$('#mask').on('click', function(e) {
e.stopPropagation();
closePopup();
modal = false;
$('a.open').hide();
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
closePopup();
modal = false;
$('a.open').hide();
}
});
});
关于jquery - 弹出按钮不消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36058490/