jquery弹出登陆效果

最新推荐文章于 2021-12-29 20:54:38 发布
最新推荐文章于 2021-12-29 20:54:38 发布
阅读量372 收藏
点赞数
分类专栏： js/jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011493599/article/details/44751005
版权

1、导入jquery.min.js

2、css样式：

ol,li {
list-style:none;
}
.close{
color:#0088DB;
text-decoration:none;
cursor:pointer
}
.ipt {
border: solid 1px #d2d2d2;
border-left-color: #ccc;
border-top-color: #ccc;
border-radius: 2px;
box-shadow: inset 0 1px 0 #f8f8f8;
background-color: #fff;
padding: 4px 6px;
height: 21px;
line-height: 21px;
color: #555;
width: 180px;
vertical-align: baseline;
}


.ipt:focus {
border-color: #95C8F1;
box-shadow: 0 0 4px #95C8F1;
}
/* btn */
.btn {
position: relative;
cursor: pointer;
display: inline-block;
vertical-align: middle;
font-size: 12px;
font-weight: bold;
height: 27px;
line-height: 27px;
min-width: 52px;
padding: 0 12px;
text-align: center;
text-decoration: none;
border-radius: 2px;
border: 1px solid #ddd;
color: #666;
background-color: #f5f5f5;
background: -webkit-linear-gradient(top, #F5F5F5, #F1F1F1);
background: -moz-linear-gradient(top, #F5F5F5, #F1F1F1);
background: linear-gradient(top, #F5F5F5, #F1F1F1);
}




btn:focus {
border-color:#4d90fe;
outline:none
}
.btn-primary {
border-color: #3079ED;
color: #F3F7FC;
background-color: #4D90FE;
background: -webkit-linear-gradient(top, #4D90FE, #4787ED);
background: -moz-linear-gradient(top, #4D90FE, #4787ED);
background: linear-gradient(top, #4D90FE, #4787ED);
}
.btn-primary:hover {
border-color:#2F5BB7;
color:#fff;
background-color: #4D90FE;
background: -webkit-linear-gradient(top, #4D90FE, #357AE8);
background: -moz-linear-gradient(top, #4D90FE, #357AE8);
background: linear-gradient(top, #4D90FE, #357AE8);
}


.btn-primary:focus {
border-color:#4d90fe;
outline:none
}


.theme-popover-mask {
z-index: 9998;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
opacity:0.4;
filter:alpha(opacity=40);
display:none
}

.theme-popover {
z-index:9999;
position:fixed;
top:50%;
left:50%;
width:660px;
height:360px;
margin:-180px 0 0 -330px;
border-radius:5px;
border:solid 2px #666;
background-color:#fff;
display:none;
box-shadow: 0 0 10px #666;
}

.theme-poptit {
border-bottom:1px solid #ddd;
padding:12px;
position: relative;
}

.theme-popbod {
padding:60px 15px;
color:#444;
height: 148px;
}




.theme-poptit .close {
float:right;
color:#999;
padding:5px;
margin:-2px -5px -5px;
font:bold 14px/14px simsun;
text-shadow:0 1px 0 #ddd
}
.theme-poptit .close:hover {
color:#444;
}



.dform {
padding:80px 60px 40px;
text-align: center;
}
.dform .ipt_error {
background-color:#FFFFCC;
border-color:#FFCC66
}
.dform-tip {
display:none;
background-color:#080;
color:#fff;
line-height:42px;
margin-top:10px;
display:;
font-size: 14px;
}
.dform-tip-errer {
background-color: #CF301A;
}
.dform-tip a {
display: inline-block;
padding: 0 20px;
margin-left:10px;
background-color: #FFE924;
color: #CF301A;
}


.theme-signin {
margin: -50px -20px -50px 90px;
text-align:left;
font-size: 14px;
}
.theme-signin h4 {
color:#999;
font-weight:100;
margin-bottom: 20px;
font-size: 12px;
}
.theme-signin li {
padding-left: 80px;
margin-bottom: 15px;
}
.theme-signin li strong {
float: left;
margin-left: -80px;
width: 80px;
text-align: right;
line-height: 32px;
}
.theme-signin .btn {
margin-bottom: 10px;
}

3、jsp页面：

<script>
jQuery(document).ready(function($) {
$('.theme-login').click(function(){
$('.theme-popover-mask').fadeIn(100);
$('.theme-popover').slideDown(200);
})
$('.theme-poptit .close').click(function(){
$('.theme-popover-mask').fadeOut(100);
$('.theme-popover').slideUp(200);
})


})
</script>
</head>


<body>
<div class="theme-buy">
<a class="btn btn-primary btn-large theme-login" href="javascript:;">点击查看效果</a>
</div>
<div class="theme-popover">
     <div class="theme-poptit">
          <a href="javascript:;" title="关闭" class="close">×</a>
          <h3>登录 是一种态度</h3>
     </div>
     <div class="theme-popbod dform">
           <form class="theme-signin" name="loginform" action="" method="post">
                <ol>
                     <li><h4>你必须先登录！</h4></li>
                     <li><strong>用户名：</strong><input class="ipt" type="text" name="log" value="lanrenzhijia" size="20" /></li>
                     <li><strong>密码：</strong><input class="ipt" type="password" name="pwd" value="***" size="20" /></li>
                     <li><input class="btn btn-primary" type="submit" name="submit" value=" 登 录 " /></li>
                </ol>
           </form>
     </div>
</div>
<div class="theme-popover-mask"></div>
</body>

天使没吃饱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现弹幕效果
温柔女魔头
01-29 1269
HTML &lt;div class="boxDom" id="boxDom"&gt; &lt;div class="idDom" id="idDom"&gt; &lt;div class="content"&gt; &lt;p class="title"&gt;吐槽&amp
Jquery实现弹幕效果
一行代码
05-22 1万+
话不多说吧，直接看效果吧： 主要思路 其实弹幕的主要思路很简单，就是将div从右向左移动，直到完全移除屏幕之后，将当前div从body中移除，这里我采用了面向对象的思想来处理，具体js代码如下： JS /** * 弹幕 */ $(function () { function BarrageManager (options) { this.opts...
jQuery点击按钮弹出登录框效果
11-11
jQuery点击按钮弹出登录框效果
jquery点击弹出登陆窗口
ICode联盟
12-29 916
下载地址 jquery点击按钮弹出登陆窗口，非常简单好用，结构非常简单，弹出动画非常流畅，是div弹框编辑非常方便。$(".theme-login").click(function(){ $(".theme-popover-mask").fadeIn(100); $(".theme-popover").slideDown(200); }) $(".theme-poptit .close").click(function(){ $(".theme-popover-mask").fadeOut(100); $
基于jQuery弹出框的登录实现
admin__istrator的博客
07-18 679
点击登录会出现现下面的弹窗 点击取消弹框会没有 下面展示一些 内联代码片。 源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device.
jQuery写登录弹窗并居中显示
滕青山博客
11-24 1260
需求 做一个登录弹框，点击登录按钮就弹出，点击右上角×就关闭 居中显示，并且随着窗口变化而变化 让除了弹框以外区域灰色，也就是加个遮罩图层 效果 先放下仿照的效果图： 代码 HTML <div class="box_lg" style="display: none"> <div class="box_tit"> <a class="close" href="#">×</a> <div class="log
jquery实现弹出登陆框效果
03-28
本教程将详细探讨如何利用 jQuery 实现弹出登录框的效果，这对于构建交互性更强的网页界面非常有用。 首先，理解基本概念。弹出登录框通常是一个模态对话框，它会覆盖住页面的主要内容，用户必须完成登录操作才能...
jQuery鼠标点击弹出登陆框效果.zip
11-22
总的来说，"jQuery鼠标点击弹出登陆框效果.zip"的实现融合了前端开发的多个方面：HTML5用于结构，CSS用于样式，而jQuery则负责交互逻辑。这样的设计提高了用户体验，同时也展示了jQuery在网页动态效果和用户交互方面...
jQuery鼠标点击弹出登陆框效果特效代码
03-20
【jQuery鼠标点击弹出登陆框效果特效代码】是一种利用JavaScript库jQuery实现的用户交互功能，主要应用于网页设计中。此特效旨在提供一种简洁且吸引人的登录界面，当用户点击某个特定元素（如按钮或链接）时，一个...
Jquery实现动态弹出登陆框
06-02
利用jquery实现弹层，弹出一个登陆框方便用户登陆使用
jquery 点击弹出登陆窗口
10-09
jquery点击弹出登陆窗口
JQuery弹出登录框
04-22
JQuery弹出登录框，学习JQuery的经典作品，值得拥有！
jQuery模态窗口登陆效果.zip
07-11
这种效果通常是通过在网页背景上覆盖一个半透明的黑色遮罩层，然后在中心位置弹出一个登录表单来实现的。下面我们将深入探讨这个主题。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、...
Jquery 实现弹出层插件
01-19
弹出层的应用还是比较多的，登陆，一些同页面的操作，别人的总归是别人的，自己的才是自己的，所以一直以来想写个弹出层插件。不多废话，直接开始吧！ 1：遮罩层  要弹出层，先要用一个遮罩层挡在下面的页面，此...
javascript--自定义弹出登陆窗口（弹出窗）
01-14 4979
web开发中浏览器对象封装了诸如prompt、alert、confirm等弹出框，但是有的弹出框并不能满足开发需要，需要我们自己定义弹出框，诸如用户登陆框、消息提示框等。本文利用弹出用户登陆框示例，对这部分知识做个小结。 示例需求：点击按钮，弹出登陆窗口，且该窗口可以拖拽，弹出窗口的同时，整个页面变成灰色半透明。 效果图如下：图1是起始页面，图2是点击“点击，弹出登陆框”按钮后页面，...
用JQuery写出登录弹出框
webnoob
03-03 8854
类似百度的登录弹出框，可用jquery的fadeIn()，hide()，show()，slideDown()等动画函数实现，一下为html5 代码： $(document).ready(function(){ $(".btn_click").click(function(){ //
js+css实现点击导航条“登录”弹出登录框界面
杉楂的博客
12-13 1万+
依旧是项目的登录问题，不过这次是界面。 实现弹出页面的效果还可以使用如bootstrap模态框一类的javascript插件，不过这里使用的是js+css简单实现的效果。 首先是导航条的“登录”： nav-login" href="javascript:;">登录 接着是login表单界面： login-form"> × 用户登录 用户名 密码
Jquery+div+css实现弹出登录窗口
weixin_34072458的博客
10-26 310
基本思路先隐藏（dispaly：none）再显示，半透明蒙版层通过z-index:9998;z-index:9999;值越大越在前面index.html<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit...
Html登录弹出框的实现
热门推荐
qq_27632117的博客
09-12 4万+
这里用到了layer.js,可以去下面的官网下载文件： http://layer.layui.com/ 然后放入js文件夹中，在html源码中引入 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
jquery实现div弹出效果
最新发布
07-08
使用jQuery实现DIV弹出效果可以通过以下步骤进行： 1. HTML结构：首先，在HTML中创建一个DIV元素，用于弹出内容的容器。例如： ```html <div id="popup" style="display: none;"> <h2>弹出内容</h2> <p>这是一个弹出窗口的内容。</p> <button id="closeBtn">关闭</button> </div> ``` 2. CSS样式：为弹出容器DIV添加样式，使其以弹出的形式显示在页面上。例如： ```css #popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 200px; background-color: #fff; border: 1px solid #ccc; padding: 20px; z-index: 9999; } ``` 3. jQuery代码：使用jQuery来实现弹出效果。例如： ```javascript $(document).ready(function() { // 点击触发弹出 $("#openBtn").click(function() { $("#popup").fadeIn(); }); // 点击关闭按钮或弹出外部区域时关闭弹出 $("#closeBtn, #popup").click(function() { $("#popup").fadeOut(); }); // 阻止点击弹出内容区域时冒泡关闭 $("#popup").click(function(event) { event.stopPropagation(); }); }); ``` 在上述代码中，首先使用`$("#openBtn")`来选择一个按钮元素，当点击该按钮时，使用`fadeIn()`方法来使弹出容器淡入显示。使用`$("#closeBtn, #popup")`来选择关闭按钮和弹出容器本身，当点击它们时，使用`fadeOut()`方法来使弹出容器淡出隐藏。 同时，还添加了一个事件处理程序来阻止点击弹出内容区域时冒泡关闭，以确保在弹出内容区域内的点击操作不会关闭弹出容器。 通过以上步骤，你可以使用jQuery实现一个简单的DIV弹出效果。记得在页面中引入jQuery库。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值