html如何做成弹窗,js+html+css制作弹窗

效果图:

弹窗效果图

准备：

引入layer.js文件，下载地址：layer.layui.com/　下载后解压并把layer文件夹拷贝到工程文件内。

引入jquery库文件，拷贝到工程文件中。

第一步:

用html做出弹窗样式，即用一个div将弹窗的布局做出来

html代码：

登陆

css代码:

.login-item input{

width:350px;

height:40px;

}

.login-item a{

width:350px;

height:40px;

background-color:blue;

display:block;

line-height:50px;

text-algin:center;

color:white;

}

.login-item{

margin-top:10px;

margin-left:20px;

}

#loginBox{

display:none;

}

其中display:none;表示将这个窗口隐藏，即不点击不显示出来。

第二步:

编写js对应的点击函数

function ShowLoginBox()

{

layer.open({

type:1,　　//１表示的是弹出框的类型是div类型的

title:"登陆",

area:["390px","300px"],　　//弹框的宽和高

content:$("#loginBox")　　//引入弹框，即通过id找到这个div

});

}

最后在html文件中分别引入js和css文件，并设置一个点击弹出点。

html如何做成弹窗,js+html+css制作弹窗相关推荐

使用原生js和css制作钟表(附源码)
最近学到css和js,用css和js制作了一个钟表,原理很简单,在js中定义管理秒针.分针.时针的函数,在秒针函数中让角度自加6,每隔一秒调用一次就完事.预看效果请点我(主要实现功能,界面不太美观) ...
php中修改弹窗的样式,CSS变形弹窗效果示例
大家都知道,弹出窗体已经是现在网页常用的一种交互设计,在这个注重交互动画体验的时代,网页弹窗也是可以来点新鲜点子的,比如今天分享的CSS 变形Modal Window. 当用户点击按钮时,按钮将会变成 ...
html ul做成表格,ul li css制作表格
实现方法:(利用div的ul和li列表标记打造类似表格效果) 我们首先分析一下如何制作:li是固定的宽度与高度(单元格),设置li在ul中浮动,当ul不够宽的时候,li就会自动另起一行排列(一行有多少 ...
网页自动切换html css js,HTML页面自动清理js、css文件的缓存（自动添加版本号）_HTML/Xhtml_网页制作...
这篇文章主要介绍了HTML页面自动清理js.css文件的缓存(自动添加版本号),小编觉得挺不错的,现在分享给大家HTML源码,也给大家做个参考.对HTML感兴趣的小伙伴们一起跟随小编过来看看吧在we ...
CSS制作类似 Photoshop 模糊蒙版效果
CSS制作类似 Photoshop 模糊蒙版效果引言不兼容IE的纯css实现代码实现代码实现原理兼容IE10,IE11的模糊蒙版效果,使用canvas 实现代码实现原理引言为了使一个在 ...
php创建扑克牌,HTML_用css制作扑克牌(图)，用css制作扑克牌Quote 声明：此 - phpStudy...
用css制作扑克牌(图) 用css制作扑克牌 Quote 声明:此文章是我对Mike Hall 源代码的研究得到了解更多请到http://www.brainjar.com 第一步: 分析扑克牌的结构 ...
css环形文本,css制作环形文本
css制作环形文本在项目开发中,我们可能会遇到环形文本的需求,这个时候,怎样在代码以通俗易懂的前提下实现我们需要的效果呢?可能你会想到用一个一个的span元素计算出旋转的角度然后拼接起来,这个方案不 ...
JavaScript使用localStorage缓存Js和css文件
对于WebApp来说,将js css文件缓存到localstorage区可以减少页面在加载时与HTTP请求的交互次数,从而优化页面的加载时间.特别是当移端信号不好高延迟时优化效果还是很显见的下面的代 ...
JS配合css实现slide文字框缩放伸展效果
<!DOCTYPE html> <html> <head> <meta http-equiv="content" content=&quo ...

html如何做成弹窗,js+html+css制作弹窗

html如何做成弹窗,js+html+css制作弹窗相关推荐

最新文章

热门文章