Question

我正在尝试执行一个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>

即使拖动弹出按钮也是可见的。请帮帮我。

Answer 1

改变这个：

 $(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();
            }
        });    
   });

https://jsfiddle.net/zqownwdn/1/

弹出按钮不会消失

1 个答案: