Jquery DIV中的可拖动覆盖弹出窗口

这就是我想要的：

html页面包含一个空白DIV，比如id=mydiv，宽度在样式中指定。 AJAX调用是对MVC控制器进行的。控制器返回html段。 返回AJAX调用后，我想做如下操作：

$'mydiv'.htmlhtmlsegment.popup

这将导致一个可拖动的模式对话框，并显示控制器返回的任何html段。加上应该有一个十字架在角落里关闭小狗。另外，如果有一个通用方法以编程方式关闭pupup，那将是非常棒的

我已经找到了很多例子，但它们都需要在每次需要启动pupup时做很多事情。有没有一种使用jQuery和CSS的简单方法

编辑1：

这就是我最后使用的。它符合我的要求，但以下问题除外：

如果我调用$self.draggable使弹出窗口可拖动，则关闭十字图标不会拖动。试图找出如何使图标成为弹出窗口其余部分的一部分，使其自动随移动的DIV移动。有什么想法吗

function xh_overlay() {
    (function ($) {

        $.fn.xhoverlay = function (options) {
            return this.each(function () {

                /*** option ***/
                var opts = $.extend({}, $.fn.xhoverlay.defaults, options),
            $overlay = $('<div class="' + opts.classPrefix + '_overlay"/>'),
            $overlayClose = $('<span class="' + opts.classPrefix + '_oClose"/>'),
            $self = $(this);
                //// <reference path="../Content/images/cross.png" />

                /*** creat Dom***/
                $(opts.parent).append($self);
                $('span.' + opts.classPrefix + '_oClose').remove();
                $('body').append($overlayClose);
                //alert($overlayClose)
                $('div.' + opts.classPrefix + '_overlay').remove();
                $('body').append($overlay);


                /**** set position***/

                var topOffset = $(document).scrollTop() + 40;
                $self.show().css({ position: 'absolute', top: topOffset + 'px', padding: '12px', marginTop: 0, left: '50%', marginLeft: ($self.outerWidth() / 2) * -1, zIndex: (opts.zIndex + 2) })

               // $self.css({ 'background-color': 'Khaki', 'border-radius': '15px', border: '6px solid #FF9933', '-moz-border-radius': '15px', '-moz-box-shadow': '6px 6px 6px gray', '-webkit-border-radius': '15px', '-webkit-box-shadow': '6px 6px 6px gray', 'box-shadow': '6px 6px 6px gray', backgroundImage: 'url(' + opts.closePath + 'images/divback.jpg)' });
                $self.css({ 'background-color': 'White', 'border-radius': '12px', border: '8px solid rgba(51, 51, 51, 0.5)', '-moz-border-radius': '12px', '-webkit-border-radius': '12px', '-webkit-box-shadow': '3px 5px 10px rgba(0,0,0,0.5)', '-moz-box-shadow': '3px 5px 10px rgba(0,0,0,0.5)', '-o-box-shadow': '3px 5px 10px rgba(0,0,0,0.5)', '-ms-box-shadow': '1px 2px 10px rgba(0,0,0,0.5)', '-box-shadow': '1px 2px 10px rgba(0,0,0,0.5)' });

                //$self.draggable();
                // set css of the overlay

                var overLH = $(window).height();
                if ($(window).height() < $(document).height())
                    overLH = $(document).height();
                $overlay
            .css({ height: overLH + 'px', position: 'absolute', width: '100%', top: 0, left: 0, zIndex: (opts.zIndex + 1), display: 'none' })
            .css({ background: opts.overlayBgCSS, opacity: opts.overlayOpCSS });

                var clPOs = $self.offset();
                $overlayClose
            .css({ position: 'absolute', 'font-size': '1px', cursor: 'pointer', padding: '12px', top: clPOs.top - 8, left: clPOs.left + $self.width() + 22, zIndex: (opts.zIndex + 3), backgroundImage: 'url(' + opts.closePath + 'images/overlaycross.png)' })

                $overlay.show();
                $overlay.fadeIn(1, function () {
                    $self.show(); opts.onLoad();
                });

                $(window).resize(setOverlayHeight).resize(setSelfPosition)
                //.scroll(setSelfPosition)
                // $self.find(opts.closeSelector).add($overlay).click(function() { closeXhoverlay(); return false; });
                $self.find(opts.closeSelector).add($overlayClose).click(function () { closeXhoverlay(); return false; });
                $self.bind('close', closeXhoverlay);
                $self.bind('resize', setSelfPosition);


                function closeXhoverlay() {
                    $self.html("");
                    $self.hide();
                    $overlay.remove();
                    $overlayClose.remove();
                    opts.onClose();
                    //$self.html("");
                }

                function setOverlayHeight() {
                    if ($(window).height() < $(document).height()) {
                        $overlay.css({ height: $(document).height() + 'px' });
                    }
                }

                function setSelfPosition() {
                    var topOffset = $(document).scrollTop() + 40;
                    $self.css({ top: topOffset + 'px' });
                    var clPOs = $self.offset();
                    $overlayClose.css({ top: clPOs.top - 10, left: clPOs + $self.width() + 15 });
                }

            });
        }

        $.fn.xhoverlay.defaults = {
            // close
            closeSelector: ".close",
            closeClick: true,
            closeEsc: true,
            closePath: 'Content/',
            effect: 'apple',

            // callbacks
            onLoad: function () { },
            onClose: function () { },

            // style
            classPrefix: 'xh',
            zIndex: 999,
            centered: false,
            modalCSS: { top: '40px' },

            overlayBgCSS: '#ddd',
            overlayOpCSS: .6,
            //overlayCSS: { background: this.overlayBgCSS, opacity: this.overlayOpCSS },
            parent: 'body'
        }
        //$.fn.xhoverlay.defaults.overlayCSS = { background: $.fn.xhoverlay.defaults.overlayCSS.overlayBgCSS, opacity: $.fn.xhoverlay.defaults.overlayCSS.overlayOpCSS }


    })(jQuery);
}

$(document).ready(function() { xh_overlay(); })

---

您似乎走对了路：jQuery UI中存在这样的组件，请参见此处的示例：

这称为对话框，详细信息如下：

在您的情况下，可以在收到Ajax响应时调用dialog方法。如果需要自定义对话框，有几个选项

带有“确定”按钮的div示例，单击该按钮将关闭对话框：

$( "#mydiv" ).dialog({
   modal: true,
   buttons: {
     Ok: function() {
       $( this ).dialog( "close" );
     }
   }
});

---

你觉得插件怎么样？插件链接

如果没有，请尝试以下操作：

window.addEvent('domready', function(){
    $$('#mydiv').makeDraggable({});
});

---

希望这有帮助

是的，这会起作用，选项中有width:auto。唯一的问题是，我正在使用一个jQueryUI主题，它看起来非常适合选项按钮等，但我不喜欢弹出窗口上的颜色：-。如果没有别的办法，我会接受的。谢谢。你也可以用jQuery主题滚轴自定义颜色。试着做一个小提琴。但是draggable不起作用，关闭图标也不显示。在我的应用程序中，两者都可以正常工作。更正：除了图标不随div拖动。