自定义弹出框

 

高手请略过....

借助jquery的样式做一个类似jqueryUI里面的弹出框。(项目里需要这么做而已)

function ShowDialog(d_title,d_msg,d_width,d_height)
{
    $("#dialog_div").remove();
    var dialog_html="";
    dialog_html=dialog_html+'<div id="dialog_div" style="display: block; position: absolute; overflow:hidden;z-index: 1106; outline: 0px; top: 275px; left: 670px;" class="ui-dialog ui-widget ui-widget-content ui-corner-all  ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-ModalWindow">';
    dialog_html=dialog_html+'    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix draggable-handle" unselectable="on" style="-webkit-user-select: none;">';
    dialog_html=dialog_html+'        <span class="ui-dialog-title" id="dialog_title" unselectable="on" style="-webkit-user-select: none;">Title</span>';
    dialog_html=dialog_html+'        <a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button" unselectable="on" style="-webkit-user-select: none;">';
    dialog_html=dialog_html+'        <span class="ui-icon ui-icon-closethick" unselectable="on" style="-webkit-user-select: none;">close</span></a>';
    dialog_html=dialog_html+'    </div>';
    dialog_html=dialog_html+'    <div id="dialog_content" class="flora ui-dialog-content ui-widget-content" style="text-align:left;height: 100%; width: auto;" dialoginit="true">';
    dialog_html=dialog_html+'    </div>';
    dialog_html=dialog_html+'</div>';
    
    var dialog=$(dialog_html);
    $("a",dialog).click(function(){$("#dialog_div").remove();});
    $("#dialog_title",dialog).html(d_title);
    $("#dialog_content",dialog).html(d_msg);    
    $("body").append(dialog);
    $("#dialog_div").css({width:d_width+"px",height:d_height+"px"});
    $("#dialog_div").draggable({handle:'.draggable-handle'});    
    
}

function HideDialog()
{
    $("#dialog_div").remove();
}

效果图