JS实现dialog登陆弹窗效果

今天写一个点击登陆跳出一个dialog弹窗，然后输入相关信息登陆，效果展示如下：

首先我们一起来看看主体的架构。代码如下：

复制代码

logo占位

复制代码

注册

复制代码

用户

复制代码

|

复制代码

登录

复制代码

退出

复制代码

[/code][code]

复制代码

用户登陆

复制代码

名字:

复制代码

密码:

复制代码

当然只有这些没有相关的CSS样式它是很难看的，我们再来看看CSS代码：

[/code][code] /*清除默认的一些样式*/

复制代码

html,body,div{

复制代码

margin: 0;

复制代码

padding: 0;

复制代码

}

复制代码

/*body的宽高以及文字居中，最小大小1200px*/

复制代码

body{

复制代码

width: 100%;

复制代码

min-width: 1200px;

复制代码

text-align: center;

复制代码

height: 900px;

复制代码

}

复制代码

/*弹出的dialog窗口样式*/

复制代码

#box{

复制代码

width: 500px;

复制代码

height: 400px;

复制代码

margin: auto;

复制代码

background-color: white;

复制代码

box-shadow: 1px 2px 2px 3px #ccc;

复制代码

position: relative;

复制代码

top: 10px;

复制代码

}

复制代码

/*顶部导航栏的背景，高，行高*/

复制代码

#header{

复制代码

background: linear-gradient(#ffffff, #eeee);

复制代码

height: 40px;

复制代码

line-height: 40px;

复制代码

}

复制代码

/*flex布局*/

复制代码

#header>*{

复制代码

display: flex;

复制代码

justify-content: space-between;

复制代码

margin: 0 200px 0 200px;

复制代码

}

复制代码

/*页面所有的按钮样式*/

复制代码

#search_button,#sbm{

复制代码

border: 1px solid #c5c5c5;

复制代码

background: #f6f6f6;

复制代码

border-radius: 3px;

复制代码

}

复制代码

[/code]
[img]https://201903.oss-cn-hangzhou.aliyuncs.com/wc/1811847-661f952b067f76f582a5e3a91629a614[/img]
最后样式也有了，我们要让它活起来JavaScript登场：
[list][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][/list][code]

复制代码

/*获取页面中的id为box的div标签并且插入样式隐藏*/

复制代码

document.getElementById('box').style.display="none";

复制代码

/*设置MyBox方法*/

复制代码

function MyBox(){

复制代码

var btn = document.getElementById('btn');

复制代码

var box = document.getElementById('box');

复制代码

// 判断box的样式是不是为隐藏

复制代码

if(box.style.display=="none"){

复制代码

// 如果box的样式为隐藏那么就让它显示

复制代码

document.getElementById('box').style.display="block";

复制代码

}else{

复制代码

// 否则结束不显示

复制代码

document.getElementById('box').style.display="none";

复制代码

}

复制代码

[/code][code] }

复制代码

//哈哈哈，小彩蛋

复制代码

console.log("I love you three thousand times.");

复制代码

[code][/code]

结语：
大家下去有时间最好自己敲一敲代码，所有的CSS样式我都有代码注释。如果有任何疑问欢迎公众号留言，后台回复【文章代码】，获取文章相关代码。

JS实现dialog登陆弹窗效果

浏览过的版块