Jquery实现自定义弹窗范例

发布时间：2023-11-03 14:39:04 所属栏目：教程来源：

导读：在项目开发中，如果我们使用javascript自带的提示对话框，感觉不怎么美观，所以我们通常都是自己定义一些对话框，这里我实现点击按钮就弹窗一个登录的窗口，点击该窗口并可以实现拖拽功能，太多文字的东西说不清楚，

在项目开发中，如果我们使用javascript自带的提示对话框，感觉不怎么美观，所以我们通常都是自己定义一些对话框，这里我实现点击按钮就弹窗一个登录的窗口，点击该窗口并可以实现拖拽功能，太多文字的东西说不清楚，直接用代码说话。

这里我将HTML、CSS、Jquery代码分别贴出来

HTML部分：

代码如下:

<button id="show" class="alter">弹窗</button>



<div class="box">

<div class="box_content">

<div class="title">

<h3>登录腾虎通行证</h3>

<h2 id="close">×</h2>

</div>

<div class="content">

<table border="0" cellpadding="0" cellspacing="0">

<tr height="60px">

<td colspan="2">

<p class="prompt" id="username_p">请输入用户名</p>

<input type="text" class="inputstyle ins" id="username"/>

</td>

</tr>

<tr height="60px">

<td colspan="2">

<p class="prompt" id="pwd_p">请输入密码</p>

<input type="password" class="inputstyle ins" id="pwd"/>

</td>

</tr>

<tr height="30px">

<td align="left"><input type="checkbox" checked="checked"/> 下次自动登录</td>

<td align="right"><a href="#">忘记密码？</a></td>

</tr>

<tr height="60px">

<td colspan="2"><input type="submit" value="登录" class="inputstyle login" id="login"/></td>

</tr>

<tr height="30px">

<td colspan="2" align="right"><a href="#">立即注册</a></td>

</tr>

</table>

</div>

<p style="width:100%;border-bottom:1px solid #EEEEEE"></p>

<div class="other">

<p>可以使用一下方式登录</p>

<ul>

<li>QQ</li>

<li>MSN</li>

<li></li>

</ul>

</div>

</div>

</div>

CSS部分代码：

代码如下:

<style type="text/css">

*{margin:0px;padding:0px;color:#555555;}

.alter{width:50px;height:30px;margin:10px}

.box{

width:100%;

height:100%;

position:fixed;

top:0;

left:0;

background: -moz-linear-gradient(rgba(11,11,11,0.5), rgba(11,11,11,0.1)) repeat-x rgba(11,11,11,0.1);

background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11,11,11,0.1))) repeat-x rgba(11,11,11,0.1);

z-index:100000;

display:none;

}

.box_content{

height:420px;

width:350px;

background:white;

position:fixed;

top:0;

left:0;

}

.box_content .title{

height:45px;

width:100%;

background:#EEEEEE;

line-height:45px;

overflow:hidden;

}

.title:hover{cursor: move;}

.title h3{float:left;margin-left:20px;}

.title h2{float:right;margin-right:15px;color:#999999}

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!