zoukankan      html  css  js  c++  java
  • 纯JS提示弹出层

    厌烦了JS的Alert,非常想自己写一个弹出层的JS,苦于水平和时间,久时未成。近日,自觉水平有所升,时间略宽裕,写之,以飨你我。思路大体如下:

    1、需要创建两个层,一层遮罩,一层显示。

    2、显示的层中需要有以下几个DIV:标题、关闭和信息提示区。

    3、然后就是CreateElement,设置各个DIV的CSS,需要注意JS在使用CSS的值时还是有一定规律的,例如z-Index,需要改为为zIndex,font-size在使用时为fontSize,也就是说凡是中间有短线的,去掉短线,然后把短线后的属性首字符大写即可。有一个Float需要特别注意,在IE下为styleFloat,其它环境中为cssFloat。

    使用的时候引入JS文件,调用时用myopen('消息内容',宽度,高度)即可。例如:myopen('你的回答太对了',300,150);对于看够了alert的人来说,偶而用一下,效果也还是不错的。使用的时候还是比较方便的,毕竟只有一个JS文件。

    var body=document.compatMode=="CSS1Compat"?document.documentElement:document.body;
    var slj_popwin=document.createElement("div");
    var slj_showwin=document.createElement("div");
    var slj_title=document.createElement("div");
    var slj_showmsg=document.createElement("div");
    var slj_close=document.createElement("div");
    
    document.getViewHeight = function(){
    if (window.innerHeight!=window.undefined) return window.innerHeight;
    if (document.compatMode=='CSS1Compat') return document.documentElement.clientHeight;
    if (document.body) return document.body.clientHeight; 
    return window.undefined; 
    }
    document.getViewWidth = function(){
    if (window.innerWidth!=window.undefined) return window.innerWidth; 
    if (document.compatMode=='CSS1Compat') return document.documentElement.clientWidth; 
    if (document.body) return document.body.clientWidth; 
    return window.undefined; 
    }
    function $(Id) { return document.getElementById(Id); }
    function center(win,w,h)
    {
    var s = win.style;
    s.left = (document.getViewWidth()-w)/2+"px";
    s.top = (document.getViewHeight()-h)/2+"px";
    }
    
    
    function myopen(str,w,h){
    with(body.style)
    {
       width=document.getViewWidth()+"px";
       height=document.getViewHeight()+"px";
    }
    with(slj_popwin.style)
    {
       width=document.getViewWidth()+"px";
       height=document.getViewHeight()+"px";
       display="block";
       background="#ccc";
       top="0px";
       left="0px";
       position="absolute";
    //   filter=alpha(opacity=90);
       opacity=0.9;
       zIndex=2;
       overflow="hidden";
    }
    with(slj_showwin.style)
    {
       position="absolute";
       background="#297405";
       zIndex=3;
       display="block";
       overflow="hidden";
       width=w+"px";
       height=h+"px";
    }
    with(slj_title.style)
    {
       position="relative";
       background="#90be4a";
       styleFloat="left";
       zIndex=3;
       display="block";
       overflow="hidden";
       width="300px";
       height="20px";
    }
    with(slj_showmsg.style)
    {
       position="relative";
       textAlign="center";
       top="50px";
       fontSize="12px";
       zIndex=3;
       display="block";
       overflow="hidden";
       width="300px";
       height="20px";
    }
    with(slj_close.style)
    {
    	position="relative";
    	padding="5px";
    	styleFloat="right";
    	fontSize="12px";
    }
    body.appendChild(slj_popwin);
    body.appendChild(slj_showwin);
    slj_showwin.appendChild(slj_title);
    slj_title.appendChild(slj_close);
    slj_showwin.appendChild(slj_showmsg);
    slj_showmsg.id="slj_showmsg";
    slj_showwin.id="slj_showwin";
    slj_close.id="slj_close";
    $("slj_close").innerHTML="<a href=\"#\" onClick=\"Close();\" style=\"text-decoration:none;\">关闭</a>";
    $("slj_showmsg").innerHTML="<font color=\"red\">"+str+"</font>";
    center($("slj_showwin"),w,h);
    }
    function Close()
    {
    body.removeChild(slj_popwin);
    body.removeChild(slj_showwin);
    window.location.reload();
    }
    
    
  • 相关阅读:
    MPX
    Centos7 LVM扩充存储空间
    capjoint conversations with Chenweiwen
    STA/LTA方法
    capjoint一些生成文件的解释
    搜索震源机制解
    git学习教程
    SAC处理命令transfer的一些详细介绍
    fastjson学习笔记
    语法检查程序LanguageTool学习和使用笔记
  • 原文地址:https://www.cnblogs.com/ddddfpxx/p/2922535.html
Copyright © 2011-2022 走看看