Javascript 如何从页面流中删除登录名&；使用jquery淡入淡出登录_Javascript_Html_Jquery_Css

Javascript 如何从页面流中删除登录名&；使用jquery淡入淡出登录

javascript html jquery css

Javascript 如何从页面流中删除登录名&；使用jquery淡入淡出登录,javascript,html,jquery,css,Javascript,Html,Jquery,Css,我试图为我的网站制作一个登录表单，但我注意到，即使登录表单不可见，它也在页面流中，这是我不想要的。我想在页面加载时完全隐藏，然后在单击时显示它，以及我已经实现的所有过渡和淡入 PS：如果由jquery触发，我将不胜感激 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>my login</title&

我试图为我的网站制作一个登录表单，但我注意到，即使登录表单不可见，它也在页面流中，这是我不想要的。我想在页面加载时完全隐藏，然后在单击时显示它，以及我已经实现的所有过渡和淡入 PS：如果由jquery触发，我将不胜感激

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>my login</title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
</head>

<body>
<div class="modal modal-open">
<div class="modal-inner">
<div class="modal-content">
<div class="modal-close-icon">
<a href="javascript:void(0)" class="close-modal"><i class="fa fa-times" aria-hidden="true"></i></a>
</div>
<div class="modal-content-inner">
<div class="login-header">
<div class="login-IbUy">
<img src="" alt="" />
<h4>Connectez-vous à votre compte</h4>
</div>
</div>
<form>
<div class="login-body">
<div class="credentials-info">
<label>
Email*
<i class="fa fa-envelop"></i>
<input placeholder="Entrez votre Email" required>
</label>
</div>
<div class="credentials-info">
<label>
Mot de passe*
<i class="fa fa-envelop"></i>
<input placeholder="Entrez votre Mot de passe" required>
</label>
</div>
<div class="credentials-info">
<i class="fa fa-envelop"></i>
<a href="#">Connectez-vous avec Facebook</a>
</div>
</div>
<div class"login-bottom">
<button type="submit" onclick="">Me connecter</button>
<span class="lostPass">
<a href"#" id="forgetPass" onclick="">Mot de passe oublié</a>
</span>
<p>
Vous n'avez pas encore de compte?
<a href="#register">Inscrivez-vous ici</a>
</p>

</div>
</form>
</div>
</div>

</div>
</div>

<main class="container demo-container">
<br>
<button class="button open-modal">Launch modal window</button>
</main>
</body>
</html>


*{
box-sizing: border-box;
}

.modal {
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.65);
visibility: hidden;
backface-visibility: hidden;
opacity: 0;
transition: opacity .15s ease-in-out;
}
.modal.modal-open {
visibility: visible;
backface-visibility: visible;
opacity: 1;
z-index: 1;
}
.modal .modal-inner {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.modal-content {
background-color: #fff;
width: 423px;
height: auto;
padding: 10px;
position: relative;
margin: 2rem;
border-radius: 8px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
}

.modal-close-icon {
position: absolute;
top: 5px;
right: 10px;
}

.modal-content-inner {
padding: 10px;
}

.modal-content-inner h1, .modal-content-inner h2, .modal-content-inner h3, .modal-content-inner h4, .modal-content-inner h5, .modal-content-inner h6 {
text-align: center;
margin-bottom: 3rem;
font-size: 24px;
}

.login-body {
width: 100%;
height: auto;
}

.credentials-info{
width: 100%;
border-bottom: 1px solid #e5e5e5;
margin-bottom: 20px;
}

.credentials-info label input{
display: block;
width: 70%;
font-size: 16px;
padding: 10px 5px 5px 30px;
border: none;
}

.credentials-info a{
width: 70%;
font-size: 16px;
padding: 10px 5px 5px 30px;
border: none;
}

form button{
display: block;
width: 100%;
background-color: #f7931e!important;
color: #fff!important;
outline: 0;
font-size: 16px;
margin: 10px auto;
padding: 10px;
border: none;
cursor: pointer;
}

.login-bottom span{
width: 100%;
}

#forgetPass{
display: block;
width: 100%;
background-color: #b9b9b9!important;
color: #fff!important;
outline: 0;
font-size: 16px;
margin: 10px auto;
padding: 10px;
border: none;
cursor: pointer;
text-align: center;
}

form p{
text-align: center;
font-size: 14px
}

.demo-container {
text-align: center;
}



var modal = document.querySelector('.modal');
var closeButtons = document.querySelectorAll('.close-modal');
// set open modal behaviour
document.querySelector('.open-modal').addEventListener('click', function() {
modal.classList.toggle('modal-open');
});
// set close modal behaviour
for (i = 0; i < closeButtons.length; ++i) {
closeButtons[i].addEventListener('click', function() {
modal.classList.toggle('modal-open');
});
}
// close modal if clicked outside content area
document.querySelector('.modal-inner').addEventListener('click', function() {
modal.classList.toggle('modal-open');
});
// prevent modal inner from closing parent when clicked
document.querySelector('.modal-content').addEventListener('click', function(e) {
e.stopPropagation();
});


我的登录
连接您的计算机
电子邮件*
路况*
Me连接器

你要再来一次吗？



启动模式窗口
*{
框大小：边框框；
}
.莫代尔{
左：0；
排名：0；
右：0；
底部：0；
背景色：rgba（0,0,0,0.65）；
可见性：隐藏；
背面可见性：隐藏；
不透明度：0；
过渡：不透明度。15秒缓进缓出；
}
.modal.modal-open{
能见度：可见；
背面可见性：可见；
不透明度：1；
z指数：1；
}
.模态.模态内部{
位置：相对位置；
身高：100%；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
.模态内容{
背景色：#fff；
宽度：423px；
高度：自动；
填充：10px；
位置：相对位置；
保证金：2rem；
边界半径：8px；
盒影：0px 0px 10px 0px rgba（0,0,0,0.35）；
}
.模式关闭图标{
位置：绝对位置；
顶部：5px；
右：10px；
}
.模态内容{
填充：10px；
}
.模态内容内部h1、.模态内容内部h2、.模态内容内部h3、.模态内容内部h4、.模态内容内部h5、.模态内容内部h6{
文本对齐：居中；
边缘底部：3rem；
字体大小：24px；
}
.登录正文{
宽度：100%；
高度：自动；
}
.证书信息{
宽度：100%；
边框底部：1px实心#e5；
边缘底部：20px；
}
.凭据信息标签输入{
显示：块；
宽度：70%；
字体大小：16px；
填充：10px 5px 5px 30px；
边界：无；
}
.证书信息a{
宽度：70%；
字体大小：16px；
填充：10px 5px 5px 30px；
边界：无；
}
窗体按钮{
显示：块；
宽度：100%；
背景色：#f7931e！重要；
颜色：#fff！重要；
大纲：0；
字体大小：16px；
利润率：10px自动；
填充：10px；
边界：无；
光标：指针；
}
.登录底部跨距{
宽度：100%；
}
#忘记通行证{
显示：块；
宽度：100%；
背景色：#b9b9b9！重要；
颜色：#fff！重要；
大纲：0；
字体大小：16px；
利润率：10px自动；
填充：10px；
边界：无；
光标：指针；
文本对齐：居中；
}
表格p{
文本对齐：居中；
字号：14px
}
.演示容器{
文本对齐：居中；
}
var modal=document.querySelector（'.modal'）；
var closeButtons=document.querySelectorAll（“.close model”）；
//设置开放模式行为
document.querySelector（'.open modal'）.addEventListener（'click'，function（））{
modal.classList.toggle（'modal-open'）；
});
//设置关闭模式行为
对于（i=0；i

我做了一个演示

var modal=document.querySelector（'.modal'）；
var closeButtons=document.querySelectorAll（“.close model”）；
//设置开放模式行为
document.querySelector（'.open modal'）.addEventListener（'click'，function（））{
modal.classList.toggle（'modal-open'）；
});
//设置关闭模式行为
对于（i=0；i
*{
框大小：边框框；
}
.莫代尔{
左：0；
排名：0；
右：0；
底部：0；
背景色：rgba（0,0,0,0.65）；
可见性：隐藏；
背面可见性：隐藏；
不透明度：0；
过渡：不透明度。15秒缓进缓出；
}
.modal.modal-open{
能见度：可见；
背面可见性：可见；
不透明度：1；
z指数：1；
}
.模态.模态内部{
位置：相对位置；
身高：100%；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
.模态内容{
背景色：#fff；
宽度：423px；
高度：自动；
填充：10px；
位置：相对位置；
保证金：2rem；
边界半径：8px；
盒影：0px 0px 10px 0px rgba（0,0,0,0.35）；
}
.模式关闭图标{
位置：绝对位置；
顶部：5px；
右：10px；
}
.模态内容{
填充：10px；
}
.模态内容内部h1、.模态内容内部h2、.模态内容内部h3、.模态内容内部h4、.模态内容内部h5、.模态内容内部h6{
文本对齐：居中；
边缘底部：3rem；
字体大小：24px；
}
.登录正文{
宽度：100%；
高度：自动；
}
.证书信息{
宽度：100%；
边框底部：1px实心#e5；
边缘底部：20px；
}
.凭据信息标签输入{
显示：块；
宽度：70%；
字体大小：16px；
填充：10px 5px 5px 30px；
边界：无；
}
.证书信息a{
宽度：70%；
字体大小：16px；
填充：10px 5px 5px 30px；
边界：无；
}
窗体按钮{
显示：块；
宽度：100%；
背景色：#f7931e！重要；
颜色：#fff！重要；
大纲：0；
字体大小：16px；
利润率：10px自动；
填充：10px；
边界：无；
光标：指针；
}
.登录底部跨距{
宽度：100%；
}
#忘记通行证{
显示：块；
宽度：100%；
背景色：#b9b9b9！重要；
颜色：#fff！重要；
大纲：0；
字体大小：16px；
利润率：10px自动；
填充：10px；
边界：无；
光标：指针；
文本对齐：居中；
}
表格p{
文本对齐：居中；
字号：14px
}
.演示容器{
文本对齐：居中；
}