jquery - DIV 中的可拖动叠加弹出窗口

Question

这就是我要找的:

1. 一个 html 页面包含一个空白 DIV(比如 id= "mydiv"并且宽度在样式中指定)。
2. 对 MVC Controller 进行 AJAX 调用。 Controller 返回 html 段。

3. AJAX 调用返回后我想做这样的事情:

   $('#mydiv').html(htmlsegment).popup();

这应该会产生一个可拖动的模态对话框并显示 Controller 返回的任何 html 段。另外应该在 Angular 落里有一个十字架来关闭小狗。另外，如果有一个通用方法以编程方式关闭小狗，那就太好了。

我发现了很多例子，但每次需要启动小狗时，它们都需要做很多事情。有使用 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(); })

Answer 1

您似乎走对了路:jQuery UI 中存在此类组件，请在此处查看示例:http://jqueryui.com/dialog/

这称为对话框，详细信息在这里:http://api.jqueryui.com/dialog/

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

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

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