zoukankan      html  css  js  c++  java
  • 自定义弹出框

    高手请略过....

    借助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%;  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({d_width+"px",height:d_height+"px"});
        $("#dialog_div").draggable({handle:'.draggable-handle'});    
        
    }
    
    function HideDialog()
    {
        $("#dialog_div").remove();
    }

    效果图

  • 相关阅读:
    第二个月课堂016讲解接口实战之接口用例(003)
    【Postman】举例实战——天气查询
    关于soapui接口的笔记
    fiddler 进行Android/IOS代理配置抓包
    项目如何部署在linux系统上
    LINUX上安装JDK+tomcat+mysql操作笔记
    Cent OS6.5——网络配置
    vmware workstations 虚拟机安装CentOS
    解决windows64位系统上安装mysql-python报错
    新建python的虚拟环境
  • 原文地址:https://www.cnblogs.com/wancy86/p/custom_dialog.html
Copyright © 2011-2022 走看看