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");
    }
  • 相关阅读:
    国外大学公开课
    普瑞马法则
    在一个整数区间里产生一组不重复的随机数
    arm架构下树莓派 运行javafx流程
    Windows 如何在cmd命令行中查看、修改、删除与添加环境变量
    我来了!
    IIS替代方案:Visual Studio自带的WebServer
    网络收藏夹DEMO
    Web收藏夹
    LazyGuy的BLOG搬迁至CNBLOGS
  • 原文地址:https://www.cnblogs.com/Zendic/p/1780888.html
Copyright © 2011-2022 走看看