请输入用户名 |
|
请输入密码 |
|
| 下次自动登录 | 忘记密码？ |
| 立即注册 | |
技术标签： jq 弹窗自定义html
在项目开发中，如果我们使用javascript自带的提示对话框，感觉不怎么美观，所以我们通常都是自己定义一些对话框，这里我实现点击按钮就弹窗一个登录的窗口，点击该窗口并可以实现拖拽功能，太多文字的东西说不清楚，直接用代码说话。
这里我将HTML、CSS、Jquery代码分别贴出来
HTML部分：
弹窗
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}
.title h2:hover{color:#444444;cursor:pointer}
.box_content .content,.other{margin:20px 20px 10px 20px;overflow:hidden;font:normal 14px "宋体";}
.content table{width:99%;}
.content .inputstyle,.prompt{height:35px;width:96.5%;padding-left:10px;}
.content .inputstyle{font:bold 18px/35px "宋体";}
.content a{
text-decoration: none;
color:#1B66C7
}
.content a:hover{text-decoration: underline;}
.content table .login{
height:45px;width:101%;
border:none;
background:#4490F7;
color:#FFFFFF;
font:bold 17px "宋体";
border-radius:4px;
}
.content table .login:hover{
background:#559BFC;
}
.content .prompt{
color:#999999;
position:absolute;
line-height:38px;
}
.box_content .other{font:normal 14px "宋体";}
.other ul{
list-style:none;
margin-top:15px;
}
.other ul li{
float:left;
height:30px;
width:30px;
margin-right:15px;
border-radius:20px;
background:#1B66C7;
color:white;
text-align:center;
line-height:30px
}
Jquery代码：
$(document).ready(function(){
BoxInit.init();
});
var BoxInit={
wWidth:undefined,//浏览器宽度
wHeight:undefined,//浏览器高度
show:undefined,//显示按钮
box:undefined,//弹窗遮盖属性
boxContent:undefined,//弹窗属性
closeBox:undefined,//关闭按钮属性
loginBtn:undefined,//登录按钮属性
init:function(){
var self=this;
//获取控件对象
self.show=$("#show");
self.box=$(".box");
self.boxContent=$(".box_content");
self.closeBox=$("#close");
self.loginBtn=$("#login");
//获取浏览器可视化的宽高
self.wWidth=$(window).width();
self.wHeight=$(window).height();
//绑定显示按钮点击事件
self.show.click(function(){self.showBtn()});
//绑定关闭按钮事件
self.closeBox.click(function(){self.closes()});
//绑定登录按钮
self.loginBtn.click(function(){self.login()});
//DIV拖拽
self.dragDrop();
//调用控制提示信息
self.controlPromptInfo();
},
/**
*显示按钮
*/
showBtn:function(){
var self=this;
self.box.animate({"width":self.wWidth,"height":self.wHeight},function(){
//设置弹窗的位置
self.boxContent.animate({
"left":(self.wWidth-self.boxContent.width())/2
},function(){
$(this).animate({"top":(self.wHeight-self.boxContent.height())/2});
});
});
},
/**
*关闭按钮
*/
closes:function(){
var self=this;
self.boxContent.animate({
"top":0
},function(){
$(this).animate({"left":-(self.wWidth-self.boxContent.width())/2},function(){
self.box.animate({"width":-self.wWidth,"height":-self.wHeight});
});
});
},
/**
*登录按钮
*/
login:function(){
var self=this;
self.boxContent.animate({
"top":0
},function(){
$(this).animate({"left":-(self.wWidth-self.boxContent.width())/2},function(){
self.box.animate({"width":-self.wWidth,"height":-self.wHeight});
});
});
},
/**
*拖拽弹窗
*/
dragDrop:function(){
var self=this;
var move=false;//标识是否移动元素
var offsetX=0;//弹窗到浏览器left的宽度
var offsetY=0;//弹出到浏览器top的宽度
var title=$(".title");
//鼠标按下事件
title.mousedown(function(){
move=true;//当鼠标按在该div上的时间将move属性设置为true
offsetX=event.offsetX;//获取鼠标在当前窗口的相对偏移位置的Left值并赋值给offsetX
offsetY=event.offsetY;//获取鼠标在当前窗口的相对偏移位置的Top值并赋值给offsetY
title.css({"cursor":"move"});
}).mouseup(function(){
//当鼠标松开的时候将move属性摄hi为false
move=false;
});
$(document).mousemove(function(){
if(!move){//如果move属性不为true，就不执行下面的代码
return;
}
//move为true的时候执行下面代码
var x = event.clientX-offsetX; //event.clientX得到鼠标相对于客户端正文区域的偏移，然后减去offsetX即得到当前推拽元素相对于当前窗口的X值(减去鼠标刚开始拖动的时候在当前窗口的偏移X)
var y = event.clientY-offsetY; //event.clientY得到鼠标相对于客户端正文区域的偏移，然后减去offsetX即得到当前推拽元素相对于当前窗口的Y值(减去鼠标刚开始拖动的时候在当前窗口的偏移Y)
if(!(x<0||y<0||x>(self.wWidth-self.boxContent.width())||y>(self.wHeight-self.boxContent.height()))){
self.boxContent.css({"left":x,"top":y,"cursor":"move"});
}
});
},
/**
*控制提示信息
*/
controlPromptInfo:function(){
//遍历提示信息，并点击
$("p[class*=prompt]").each(function(){
var pro=$(this);
pro.click(function(){
//点击提示信息自身隐藏，文本框获取焦点
pro.hide().siblings("input").focus();
});
});
//遍历文本框
$("input[class*=ins]").each(function(){
var input=$(this);
//文本框失去焦点
input.blur(function(){
//如果文本框值为空
if(input.val()==""){
//显示提示信息
input.siblings(".prompt").show();
}
}).keyup(function(){//按键抬起的时候
if(input.val()==""){//如果文本框值为空
//文本框失去焦点显示提示信息
input.blur().siblings(".prompt").show();
}else{
//提示信息隐藏
input.siblings(".prompt").hide();
}
});
});
}
}
整个功能的代码都在这里了
文章浏览阅读3.6k次，点赞2次，收藏2次。DELL7080台式机两块硬盘。_没有u盘怎么装ubuntu
文章浏览阅读32次。题面Bessie wants to navigate her spaceship through a dangerous asteroid field in the shape of an N x N grid (1 <= N <= 500). The grid contains K asteroids (1 <= K <= 10,000), which are conv...
文章浏览阅读2.6w次，点赞21次，收藏112次。机器视觉则主要是指工业领域视觉的应用研究，例如自主机器人的视觉，用于检测和测量的视觉系统等。它通过在工业领域将图像感知、图像处理、控制理论与软件、硬件紧密结合，并研究解决图像处理和计算机视觉理论在实际应用过程中的问题，以实现高效的运动控制或各种实时操作。_工业机器视觉系统的构成与开发过程(理论篇—1
文章浏览阅读5.9w次，点赞32次，收藏58次。legend 传奇、图例。plt.legend()的作用：在plt.plot() 定义后plt.legend() 会显示该 label 的内容，否则会报error: No handles with labels found to put in legend.plt.plot(result_price, color = 'red', label = 'Training Loss') legend作用位置：下图红圈处。..._plt.legend
文章浏览阅读2.2k次，点赞3次，收藏11次。深入理解 C# .NET Core 中 async await 异步编程思想引言一、什么是异步？1.1 简单实例（WatchTV并行CookCoffee）二、深入理解（异步）2.1 当我需要异步返回值时，怎么处理？2.2 充分利用异步并行的高效性async await的秘密引言很久没来CSDN了，快小半年了一直在闲置，也写不出一些带有思想和深度的文章；之前就写过一篇关于async await 的异步理解 ，现在回顾，真的不要太浅和太陋，让人不忍直视！好了，废话不再啰嗦，直入主题：一、什么是异步？_netcore async await
文章浏览阅读6.5w次，点赞166次，收藏309次。当我看到别人的类上面的多行注释是是这样的：这样的：这样的：好装X啊！我也想要！怎么办呢？往下瞅：跟着我左手右手一个慢动作~~~File--->Settings---->Editor---->File and Code Templates --->Includes--->File Header:之后点applay--..._idea作者和日期等注释
文章浏览阅读175次。Netperf是一种网络性能的测量工具，主要针对基于TCP或UDP的传输。Netperf根据应用的不同，可以进行不同模式的网络性能测试，即批量数据传输（bulk data transfer）模式和请求/应答（request/reponse）模式。工作原理Netperf工具以client/server方式工作。server端是netserver,用来侦听来自client端的连接,c..._netperf 麒麟
文章浏览阅读1.1k次，点赞2次，收藏3次。作者| qcrao责编 | 屠敏出品 | 程序员宅基地刚开始写这篇文章的时候，目标非常大，想要探索 Go 程序的一生：编码、编译、汇编、链接、运行、退出。它的每一步具体如何进行，力图弄清 Go 程序的这一生。在这个过程中，我又复习了一遍《程序员的自我修养》。这是一本讲编译、链接的书，非常详细，值得一看！数年前，我第一次看到这本书的书名，就非常喜欢。因为它模仿了周星驰喜剧..._go run 每次都要编译吗
文章浏览阅读1.4k次，点赞4次，收藏2次。0、C++的输入输出分为三种：(1)基于控制台的I/O (2)基于文件的I/O (3)基于字符串的I/O 1、头文件[cpp] view plaincopyprint?#include 2、作用istringstream类用于执行C++风格的字符串流的输入操作。 ostringstream类用_c++ istringstream a >> string
文章浏览阅读2k次，点赞3次，收藏14次。我们在每个修改的地方都记录一条对应的 redo 日志显然是不现实的，因此实现方式是用时间换空间，我们在数据库崩了之后用日志还原数据时，在执行这条日志之前，数据库应该是一个一致性状态，我们用对应的参数，执行固定的步骤，修改对应的数据。1，MySQL 就是通过 undolog 回滚日志来保证事务原子性的，在异常发生时，对已经执行的操作进行回滚，回滚日志会先于数据持久化到磁盘上（因为它记录的数据比较少，所以持久化的速度快），当用户再次启动数据库的时候，数据库能够通过查询回滚日志来回滚将之前未完成的事务。_binglog
文章浏览阅读3k次。概述之前介绍过 移动Web开发基础-flex弹性布局（兼容写法） 里面有提到过想做一个Chrome插件，来生成flexbox布局的css代码直接拷贝出来用。最近把这个想法实现了，给大家分享下。play-flexbox插件介绍play-flexbox一秒搞定flexbox布局，可直接预览效果，拷贝CSS代码快速用于页面重构。 你也可以通过点击以下链接（codepen示例）查_chrome css布局插件
文章浏览阅读308次。我自己的配置是GeForce GTX 1660 +CUDA10.0+CUDNN7.6.0 + TensorFlow-GPU 1.14.0Win10系统安装tensorflow-gpu（按照步骤一次成功）https://blog.csdn.net/zqxdsy/article/details/103152190环境配置——win10下TensorFlow-GPU安装（GTX1660 SUPER+CUDA10+CUDNN7.4）https://blog.csdn.net/jiDxiaohuo/arti