Question

这就是我要找的：

html页面包含空白DIV（比如id =＆＃34; mydiv＆＃34;宽度在样式中指定）。
对MVC控制器进行AJAX调用。控制器返回html段。
返回AJAX调用后，我想做类似的事情：

$（＆＃39;＃mydiv＆＃39）。HTML（htmlsegment）.popup（）;

这应该会导致一个可拖动的模态对话框，并显示控制器返回的任何html段。另外应该在角落里有一个十字架来关闭pupup。另外，使用通用方法以编程方式关闭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(); })

Answer 1

您似乎采用了正确的方式：此类组件存在于jQuery UI中，请参阅此处的示例：http://jqueryui.com/dialog/

这称为dialog，详情请参阅：http://api.jqueryui.com/dialog/

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

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

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

Answer 2

你对插件有什么看法？ Here's一个插件链接

如果不这样做：

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

希望这有帮助

来自DIV的可拖动叠加弹出窗口

2 个答案: