Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <ul>
- <li id='signUp'>Sign Up</li>
- <li id="logIn">Log In</li>
- </ul>
- <div id="logInModal" class="modal">
- <div class="modal-content">
- sssssss
- </div>
- </div>
- <div id="signUpModal" class="modal">
- <div class="modal-content">
- sssssss
- </div>
- </div>
- .modal {
- display: none;
- position: fixed;
- z-index: 1;
- padding-top: 100px;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- overflow: auto;
- background-color: rgb(0,0,0);
- background-color: rgba(0,0,0,0.4);
- }
- .modal-content {
- background-color: #fefefe;
- margin: auto;
- padding: 20px;
- border: 1px solid #888;
- width: 80%;
- }
- var logInModal = document.getElementById('logInModal');
- var logInButton = document.getElementById("logIn");
- logInButton.onclick = function() {
- logInModal.style.display = "block";
- }
- window.onclick = function(event) {
- if (event.target == logInModal) {
- logInModal.style.display = "none";
- }
- }
- var signUpModal = document.getElementById('signUpModal');
- var signUpButton = document.getElementById("signUp");
- signUpButton.onclick = function() {
- signUpModal.style.display = "block";
- }
- window.onclick = function(event) {
- if (event.target == signUpModal) {
- signUpModal.style.display = "none";
- }
- }
Add Comment
Please, Sign In to add comment