javascript+css+html实现弹出层

最新推荐文章于 2021-06-07 18:21:20 发布

xmggckl

最新推荐文章于 2021-06-07 18:21:20 发布

阅读量909

点赞数

CC 4.0 BY-SA版权

分类专栏： javaEE 文章标签： JavaScript CSS HTML

本文链接：https://blog.youkuaiyun.com/xmggckl/article/details/8919895

javaEE 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS及JavaScript实现的用户注册弹窗功能。该弹窗包括用户信息输入框、权限选择及提交按钮等元素，并具备显示与隐藏功能。

js代码

//弹出隐藏层用户管理注册
function ShowDiv(div1,div2){
document.getElementById(div1).style.display='block';
document.getElementById(div2).style.display='block' ;
var bgdiv = document.getElementById(div2);
bgdiv.style.width = document.body.scrollWidth;
$("#"+div2).height($(document).height());
};
//关闭弹出层
function CloseDiv1(div1,div2)
{
document.getElementById(div1).style.display='none';
document.getElementById(div2).style.display='none';
};

css代码

@charset "utf-8";

/*用户注册**/
.black{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
border-style: none;
border: none;

}

/*主界面**/
.content{
display: none;
position: absolute;
top: 20%;
left: 30%;
width: 30%;
height: 60%;
border: 1px solid gray;
background-color:white;
z-index:1002;
overflow: auto;

}

html代码

<div id="fade" class="black>
</div>
<div id="MyDiv" class="content"
style="filter:progid:DXImageTransform.Microsoft.Shadow
(Color=#666666,Direction=120,strength=15)">
<div style=" cursor: default;border: none; background-color: #255FDC;">
<span style="color:white;">管理员注册</span>
<span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')"><img src="images/close.jpg" style="border: none; border-style: none;margin-left: 270px;"></span>
</div>
<hr>
<center>
      <form action="RegiserAction_Register" method="post" onsubmit="return checkuserregi();">
     <table >
      <tr>
       <td >
        <span class="STYLE10">用 户 名：</span>
       </td>
       <td >
        <input type="text" id="regiusername" name="login.UserName" onblur=" return checkregiusername();" class="inputCss">

       </td>
       <td >
        <span>*</span>
       <span class="STYLE10" id="span_CheckUsername">用户名1到10位</span>
       </td>
      </tr>
      <tr>
       <td >
        <span class="STYLE10">输入密码：</span>
       </td>
       <td >
        <input type="password" id="regiuserpaw" name="login.Pwd" maxlength="16" class="inputCss" onblur="return checkregiuserpaw();"/>
       </td>
       <td >
        <span>       *</span>
       <span class="STYLE10">5位以上数字或字母</span>
       </td>
      </tr>
      <tr>
       <td>
        <span class="STYLE10">确认密码：</span>
       </td>
       <td >
        <input type="password" id="regiuserrpaw" name="rexPassWord" class="inputCss" onblur="return checkregiuserrpaw();"/>
       </td>
       <td >
       <span>     *</span>
       <span class="STYLE10"> 两次密码必须相同</span>
       </td>
      </tr>
      <tr>
       <td>
        <span class="STYLE10">中 文 名：</span>
       </td>
       <td >
        <input type="text" id="regiuserrname" name="login.NickName" class="inputCss" onblur="return checkregiuserrname();"/>
       </td>
       <td >
        <span >     *</span>
        <span class="STYLE10"> 中文名必须为中文</span>
       </td>
      </tr>
      <tr>
       <td >
        <span class="STYLE10">用户权限：</span>
       </td>
       <td >
        <select name="login.power">
         <option value="0">
          管理员
         </option>
         <option value="1">
          操作者
         </option>
         <option value="2">
          浏览者
         </option>
        </select>
      </tr>
      <tr >
      <td>
        <span class="STYLE10"></span>
       </td>
       <td style="padding-top: 10px;">
        <span > <input src="images/index1_86.gif" type="image" /> </span>
       </td>
      </tr>

</table>
</form>

</center>

</div>