automatic login popup using html, css and java script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>automatic-popup</title>
<style>
#popup {
border: 2px solid black;
width: 600px;
height: 250px;
position: absolute;
top: 250px;
left: 414px;
background-color: #FF5722;
display: none;
}
#input {
display: flex;
flex-direction: column;
margin-top: 37px;
}
.user-pass {
width: 240px;
height: 38px;
margin-left: 169px;
margin-top: 10px;
border: 1px solid black;
border-radius: 5px;
text-align: center;
}
.user-pass:hover{
background-color: #f3cbbf;
}
#user-pass-btn {
width: 246px;
height: 38px;
margin-left: 169px;
margin-top: 10px;
border: 1px solid black;
border-radius: 5px;
background-color: #f3cbbf;
}
#user-pass-btn:hover{
background-color: #ee8a6b;
cursor: pointer;
}
#cancel {
position: relative;
top: -189px;
left: 566px;
width: 34px;
height: 34px;
border: 1px solid black;
border-radius: 2px;
color: white;
background-color: red;
}
#cancel:hover{
color: black;
}
</style>
</head>
<body>
<!-- first add some content -->
<div id="para">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore possimus ducimus vel mollitia minus
voluptatem eligendi ea, quia doloremque quibusdam quo eaque tenetur debitis facilis illo culpa delectus
doloribus velit quod, repudiandae, a iure sint at! Aperiam possimus ducimus sunt quaerat ab eaque culpa amet. At
pariatur molestiae non nobis distinctio deserunt cum deleniti voluptatibus iste, eum omnis hic, libero sequi
nulla! Ad eveniet incidunt illum, odio perferendis saepe id consequatur omnis illo beatae quasi quis, dolorem
non soluta quo deserunt ullam nemo unde optio! Maiores tempora nemo ipsam atque! Sapiente ut voluptas in, quidem
temporibus sed amet. Beatae, quo. Aperiam unde facilis impedit quos architecto quas magni nemo voluptate minima
quidem? Quasi, ea eligendi architecto a atque, molestiae dolor ipsam molestias vel quisquam quibusdam quo
corrupti at in, officia nemo dolores eveniet? Illo aut itaque et error nam deleniti beatae dolorum laudantium.
Illo, animi tenetur harum, nisi explicabo asperiores excepturi, totam architecto ipsum quis labore doloribus
iste nostrum fugiat officiis similique nemo ullam voluptatibus modi minus aspernatur molestias amet numquam. Est
quis sint voluptatum maiores quaerat neque, eveniet perferendis expedita placeat facere quasi! Omnis voluptas
eligendi nemo unde aut dolore, commodi minima ea ut eius amet recusandae velit, laboriosam iusto rerum culpa
consequatur ratione. Nobis molestiae temporibus laborum ut eveniet, deleniti rem asperiores. Magni eveniet eaque
eligendi nam consectetur officia iusto cumque voluptatum! Ipsum totam voluptatem temporibus quos rerum dolor
recusandae error, veritatis laborum explicabo voluptas. Aperiam, voluptates placeat similique corrupti optio
unde quo hic ipsam dolorem quaerat nisi aliquam rerum explicabo dignissimos quia, deserunt laboriosam laudantium
assumenda? Incidunt voluptatibus quaerat facere accusamus consequuntur? Nesciunt, ducimus! Labore vel
consequatur autem deserunt iste hic amet architecto modi reiciendis nulla natus unde optio quidem dicta cum quo
possimus laboriosam perferendis, odio inventore magnam blanditiis sequi est. Repellat incidunt porro explicabo
cumque quia ducimus assumenda obcaecati, labore iusto voluptatibus nobis officia. Fuga similique odit porro qui
omnis consequuntur rem totam tempore. Architecto animi quos sapiente excepturi ex debitis distinctio. Recusandae
sequi accusamus tenetur quibusdam esse asperiores blanditiis inventore quasi provident voluptatum, repellendus
doloremque excepturi fugiat culpa quo cum officiis voluptas velit laboriosam pariatur porro dicta! Perspiciatis
aliquid nisi voluptas delectus atque, vitae labore sapiente molestiae cumque ipsam. Recusandae odio pariatur non
distinctio, nam delectus, perspiciatis sed quo quas nisi deserunt natus tempora iusto enim dicta reprehenderit
alias maiores debitis mollitia. Quam, deserunt iste velit asperiores aperiam fugiat tempora facilis id, eaque
voluptate, veniam quo laborum nam eum quaerat! Iure necessitatibus labore aspernatur quidem, suscipit sequi
natus, vitae corporis ullam ab reiciendis libero et? Alias, nam. Deserunt blanditiis sunt, eos quae alias
deleniti dolorum facilis saepe, fugit, laboriosam aliquid rem! Obcaecati, nostrum! Quo, ut omnis repellendus
modi assumenda, quos ratione magni facilis aliquid quas eaque magnam, ex tempore! Maiores sapiente, voluptatem
veritatis aut ex culpa voluptates officia nulla in a eveniet. Nam quasi vero vel placeat perferendis facere illo
ducimus alias eius ipsa dolor temporibus voluptas magnam id quaerat ad, expedita impedit laborum. Molestiae
aspernatur sit error magnam modi aliquam provident nobis at, voluptatibus nostrum, laborum consequatur
distinctio, atque recusandae reprehenderit perferendis ad ullam quam et inventore corrupti? Maiores
reprehenderit excepturi porro quod alias, tenetur illo natus placeat quidem nam laudantium voluptatum, omnis
officia vitae animi nobis? In sapiente dicta sed neque veniam magnam adipisci repellat assumenda perferendis,
aliquam excepturi expedita asperiores deserunt fugiat reiciendis amet sunt rerum repudiandae libero ratione ut
animi dolore eveniet fugit? Tempore quibusdam repellendus recusandae ipsam quasi. Nam placeat animi minus libero
maxime ab temporibus recusandae porro doloremque, quod commodi corrupti optio iusto consectetur vero architecto
culpa! At, aliquid architecto, cum ipsam nulla cupiditate error natus repudiandae inventore id ducimus sed quod,
ab iste eligendi recusandae fuga accusantium? Fugit ex minima perferendis voluptates voluptatem quam libero non
labore, maiores laboriosam modi cum in ad alias at sit mollitia sint ipsam fugiat soluta doloribus laudantium
similique ab nesciunt. Tenetur itaque hic possimus error atque nobis numquam ullam necessitatibus recusandae
minus quia eligendi veritatis eaque temporibus rerum quaerat libero laudantium nam assumenda doloremque,
asperiores voluptatem! Excepturi, quas nemo facere dolor optio veritatis ipsam ut necessitatibus, tempore animi
repellendus velit enim suscipit natus molestias fugit expedita earum tempora, modi fuga rem aliquam. Quaerat
cupiditate ratione nobis autem, ipsa quod placeat accusantium quia ad rerum, nostrum eligendi. Provident
asperiores dignissimos laborum consectetur quibusdam tempore. Ex illum est dicta quos blanditiis debitis. Eius
voluptatum id exercitationem neque blanditiis, voluptates vel, libero numquam aut illo incidunt ad pariatur
natus cupiditate? Minima dicta praesentium quidem incidunt rem! Ipsum, debitis! Inventore aspernatur in, quasi,
vero tempore hic dolor illo quas perferendis, quia facere architecto sit doloribus soluta optio. Molestiae,
consectetur! Ullam, cumque? Ex, rerum debitis labore ipsam sapiente deleniti explicabo quis praesentium
laboriosam tempora sed facere quam itaque illo, quas dolore optio maxime veritatis temporibus odit expedita
accusantium animi modi. Est voluptatem ratione quam. Ipsa, nihil.</div>
<div id="popup">
<div id="input">
<input type="text" class="user-pass" placeholder="username">
<input type="text" class="user-pass" placeholder="password">
<button id="user-pass-btn">login</button>
<button id="cancel"><strong>X</strong></button>
</div>
</div>
<script>
let popup = document.getElementById('popup');
// blur background
let para = document.getElementById('para');
function auto(){
popup.style.display='block';
para.style.filter='blur(8px)';
}
setTimeout(auto,2000)
// cancel button
document.getElementById('cancel').addEventListener('click',function(){
popup.style.display='none';
// cancel blur
para.style.filter='none';
})
</script>
</body>
</html>
){kind=link}
0 Comments