基于jQuery的弹出隐藏层的窗口特效

网络编程 2025/12/31 佚名

3 2 1

运行效果后，点击菜单，会弹出一个注册表单，类似于很多论坛的用户注册及登录功能那样，目前还是挺流行的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>弹出层</title>   <style type="text/css"> .pro_list { width:720px; margin:0 auto; } .menu { width:700px; height:30x; padding-top:15px; clear:both; } .message_box { width:550px; border:5px solid #bd0404; background:#fef8f6; position:absolute; margin:0 auto; left: 498px; top: 200px; display:none; } .message_box { width:550px; border:5px solid #bd0404; background:#fef8f6; position:absolute; margin:0 auto; left: 498px; top: 200px; display:none; } .message_box .mess_input { width:200px; border:1px solid #ccc; height:20px; caption-side:inherit; } .ly_td-bg { border-bottom:#f8d1cf dashed 1px; width:180px; padding-right:10px; } .dd { width:200px; height:161px; border:1px solid #ccc; } .bb span { color:#855409; font-size:14px; margin-left:10px; } .mess_show { float:right; margin-right:5px; } </style> </head> <body>    <input name="button" src="/UploadFiles/2021-04-02/pro_l_menu2.jpg">   <input name="button" src="https://www.jb51.net/jscss/demoimg/201108/pro_l_menu2.jpg"> </dt>   <input name="button" src="/UploadFiles/2021-04-02/pro_l_menu2.jpg">   <input name="button" src="https://www.jb51.net/jscss/demoimg/201108/pro_l_menu2.jpg">  <input name="button" src="/UploadFiles/2021-04-02/pro_l_menu2.jpg">   <input name="button" src="https://www.jb51.net/jscss/demoimg/201108/pro_l_menu2.jpg">   <input name="button" src="/UploadFiles/2021-04-02/pro_l_menu2.jpg">   <input name="button" src="https://www.jb51.net/jscss/demoimg/201108/pro_l_menu2.jpg">   <input name="button" src="/UploadFiles/2021-04-02/pro_l_menu2.jpg">         <a href="javascript:;" onclick="showimg('images/message_1.jpg');"><img src="images/message_1.jpg" alt="基于jQuery的弹出隐藏层的窗口特效" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a>   &nbsp; 姓名： <input name="names" class="mess_input" /> *&nbsp;您的真实姓名   &nbsp; 电话： <input name="names" class="mess_input" /> *&nbsp;请填写您的电话号码   &nbsp; 地址： <input name="names" class="mess_input" /> *&nbsp;请填写您的地址,以保证资料邮递   &nbsp; 邮箱： <input name="names" class="mess_input" /> *&nbsp;请填写电子邮箱   &nbsp;   内容 <textarea name="text_content" class="dd" id="text_content" onmouseover=menuControl() cols="20" rows="10" style="overflow-y:hidden"><"top">         <strong>填写留言或选择快捷留言</strong>   现在就想加入，请给我预留名额。   对这个项目很感兴趣，尽快寄资料   请问我这个地方有加入者了吗？                <STRONG>填写留言或选择快捷留言</STRONG>   我想加入，请来电话告诉具体细节   想找一个合适的项目做，请来电话   有兴趣开店，请寄资料或打电话。                 <STRONG>填写留言或选择快捷留言</STRONG>   详细研究过您们的项目，想加入。   加入你们后，还会提供哪些服务？   想去你们公司考察，请给我来电话              &nbsp; &nbsp; <input src="/UploadFiles/2021-04-02/mess_menu1.jpg"> <input name="button" src="images/mess_menu2.jpg"> &nbsp;    </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

弹出隐藏层