Question

我已经提到了代码，我试图创建一个文本编辑器，弹出刚好在内容可编辑div区域的下方或上方，问题是如果div标签靠近向上边缘弹出窗口向上移动，也不可拖沓。请帮助我。

＆＃13;

Cleaner

＆＃13;

$(function(){
            var mouseX;
            var mouseY;
            var modal = false;
            $(document).mousemove(function(f){
                mouseX = f.pageX;
                mouseY = f.pageY;
            });
            var openPopup = function(e){ //Function to open popup
                $(e).fadeIn(400);
                $('#mask, [data-nitstextpopup]').fadeIn(400).css({'top': mouseY,'left': mouseX}).draggable({ containment: 'body' });
                $('#mask').css({'top': 0, 'left': 0});
                $('[data-nitstextbutton]').hide();
            };
            var closePopup = function() { // Function to close the popup
                    $('#mask, [data-nitstextpopup]').fadeOut(400);
                    $('[data-nitstextbutton]').show();
            };
                
            $('[data-nitspagelabel]').hover(function(){
                $(this).css('border','solid 1px #777');
            }, function(){
                $(this).css('border','none');
            });
            $('[data-nitspagelabel]').click(function(){
                $(this).attr('contenteditable','true');
                var labeltype= $('[data-nitspagelabel]').data("nitslabeltype");
                if(labeltype == "text"){
                    if(modal == false){
                        modal = true;
                        $('[data-nitstextbutton]').css({'top':mouseY, 'left':mouseX}).fadeIn(400).click(function(e){
                            e.preventDefault();
                            var popupbox = $(this).attr('href');
                            openPopup(popupbox);
                        });
                    }
                }
            });
            $('#mask').on('click', function(e) {
                e.stopPropagation();
                closePopup();
                modal = false;
                $('[data-nitstextbutton]').hide();
            });
            $(document).keyup(function(e) {
                if (e.keyCode == 27) {
                    closePopup();
                    modal = false;
                    $('[data-nitstextbutton]').hide();
                }
            });
        });

＆＃13;

#mask {
            display: none;
            background: #9ACD32;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 88888;
            width: 100%;
            height: 100%;
            opacity: 0.2
        }
        [data-nitstextpopup]{
            display: none;
            background: #e2e2e2;
            padding: 0px;
            float: left;
            font-size: 1.2em;
            position: fixed;
            
            width: 250px;
            margin: -100px 0 0 -100px;
            z-index: 99999;
        }

＆＃13;

Answer 1

您已在margin

上额外[data-nitstextpopup]

删除margin: -100px 0 0 -100px;并添加margin以取代您需要的内容

<强>更新

如果您想要可拖动的div，请使用.draggable();代替.draggable({ containment: 'body' })

详细了解jQuery Draggable

弹出框位置限制到内容区域

1 个答案: