zoukankan      html  css  js  c++  java
  • Javascript 对话框 (遇到 Ajax Load无法加载问题)

    一个弹框公共组件,实现类似Discuz! 的登入效果。

    /*
    文档名称: 无模式对话框弹出组件

    */

    // HTML文本 宽度 高度 绑定关闭
    function sAlert(htmlStr,msgWidth,msgHeight,closeid){
    //alert(htmlStr);
    var msgw,msgh;
    msgw
    =msgWidth!=null?msgWidth:400;//Width
    msgh=msgHeight!=null?msgHeight:100; //Height

    var sWidth,sHeight; //遮罩大小
    sWidth=document.body.clientWidth;
    sHeight
    = document.body.clientHeight; //screen.height;

    //创建覆盖层
    var bgObj=document.createElement("div");
    bgObj.setAttribute(
    'id','bgDiv');
    bgObj.style.position
    ="absolute";
    bgObj.style.top
    ="0";
    bgObj.style.background
    ="#000"; //黑色
    bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=4,opacity=25,finishOpacity=75";
    bgObj.style.opacity
    ="0.6";
    bgObj.style.left
    ="0";
    bgObj.style.width
    =sWidth + "px";
    bgObj.style.height
    =sHeight + "px";
    bgObj.style.zIndex
    = "10000";
    //bgObj.onclick = cAlert();
    document.body.appendChild(bgObj);
    //覆盖层 END

    //创建消息框
    var msgObj=document.createElement("div");

    msgObj.setAttribute(
    "id","msgDiv");
    //msgObj.setAttribute("align","center");
    //msgObj.style.overflow = "hidden";
    //msgObj.style.background="white";
    //msgObj.style.border="1px solid #666666";
    msgObj.style.position = "absolute";
    msgObj.style.left
    = ((document.documentElement.clientWidth/2-msgw/2)+document.documentElement.scrollTop).toString()+"px";
    msgObj.style.top
    = ((document.documentElement.clientHeight/2-msgh/2)+document.documentElement.scrollTop).toString()+"px";
    //msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
    //msgObj.style.marginLeft = "-225px" ;
    //msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
    msgObj.style.width = msgw + "px";
    msgObj.style.height
    =msgh + "px";
    //msgObj.style.textAlign = "center";
    //msgObj.style.lineHeight ="25px";
    msgObj.style.zIndex = "12000";
    document.body.appendChild(msgObj);
    document.getElementById(
    "msgDiv").innerHTML=htmlStr;
    document.getElementById(
    "bgDiv").onclick = function(){cAlert();}
    try{//处理未绑定异常
    document.getElementById(closeid).onclick = function(){cAlert();}
    }
    catch(error){
    alert(
    "ERROR");
    }
    }

    function cAlert()
    {
    document.body.removeChild(document.getElementById(
    "bgDiv"));
    document.body.removeChild(document.getElementById(
    "msgDiv"));
    }

    在火狐下,遇到了无法弹出的问题,导致问题产生的原因是Load方法未执行完成,就去调用其结果。

    将调用过程放到  回调函数里面就OK~~

    var $html = $("<div id=\"temphtmlNodete\" style=\"display:none;\"></div>");
    $.ajaxSetup ({cache:
    false });
    $html.load(
    "密码找回.html",function(){
    sAlert($html.html(),
    750,400,"close");
    }
  • 相关阅读:
    css居中问题(转)
    Request.ServerVariables 各个参数的用法
    html5 画个球碰撞
    递归生成json
    AspNetPager分页结合存储过程的用法
    sql+aspnetpager+查询功能
    求1+2+……+n
    几种排序的比较 bitmapsort,qsort,set
    利用两个栈,反转其中一个栈的元素
    进程间通信(IPC, Inter Process Communication)读书笔记
  • 原文地址:https://www.cnblogs.com/Zendic/p/1780888.html
Copyright © 2011-2022 走看看