Created
December 24, 2020 01:32
-
-
Save omargfh/cf5d92fc458626e2820be02a80b88537 to your computer and use it in GitHub Desktop.
Web Pop-up Window using jQuery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="pop-up" class="pop-up hidden"> | |
<div class="pop-up-window" id="pop-up-window"> | |
<div id="pop-up-close" class="pop-up-close">✕</div> | |
<div id="pop-up-content" class="pop-up-content"> | |
</div> | |
</div> | |
</div> | |
<div class="pop-up-call" data-content="(some HTML)"></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(function() { | |
$('.pop-up-call').each(function(i, el) { | |
$(el).click(function() { | |
$('#pop-up').removeClass('hidden'); | |
$('#pop-up-window').addClass('pop-up-window-animate'); | |
$('#pop-up-content').html('<div style="display: flex; flex: 100%; width: 100%; height: 100%; align-items: center; justify-content: center;"><img src="https://i.stack.imgur.com/oQ0tF.gif" width="40px" alt="load"></div>'); | |
$.ajax({ | |
type: 'GET', | |
url: el.dataset.content, | |
timeout: 5000, | |
success: function(data) { | |
$('#pop-up-content').html(data); | |
}, | |
error: function(a, b) { | |
setTimeout(() => { | |
$('#pop-up-close').click(); | |
}, 1000) | |
} | |
}); | |
}); | |
}); | |
$('#pop-up-close').click(function() { | |
$('#pop-up-window').removeClass('pop-up-window-animate'); | |
setTimeout(() => { | |
$('#pop-up-window').addClass('pop-up-window-close-animate'); | |
}, 200); | |
setTimeout(() => { | |
$('#pop-up-content').html(""); | |
$('#pop-up-window').removeClass('pop-up-window-close-animate'); | |
$('#pop-up').addClass('hidden'); | |
}, 1200); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
margin: 0; | |
padding: 0; | |
} | |
.hidden { | |
visibility: hidden; | |
} | |
.pop-up ::-webkit-scrollbar { | |
width: 0px; | |
background: transparent; | |
} | |
.pop-up { | |
position: fixed; | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
align-items: center; | |
overflow: hidden; | |
background-color: rgba(32, 32, 32, 0.7); | |
width: 100%; | |
height: 100%; | |
z-index: 1031; | |
} | |
.pop-up-window { | |
width: 90%; | |
height: 90%; | |
padding: 15px; | |
position: relative; | |
overflow-y: scroll; | |
scroll-bar-width: 0px; | |
border-radius: 15px; | |
box-sizing: border-box; | |
background-color: #f9f9f9; | |
box-shadow: 1px 1px 11px rgba(32, 32, 32, 0.5); | |
} | |
.pop-up-window-animate { | |
animation: slide-in 1s ease-in-out both; | |
} | |
.pop-up-window-close-animate { | |
animation: slide-in 1s ease-in-out; | |
animation-direction: reverse; | |
animation-fill-mode: forwards; | |
} | |
@keyframes slide-in { | |
from { | |
transform: translateY(-500px); | |
opacity: 0; | |
} | |
to { | |
transform: translateY(0px); | |
opacity: 1; | |
} | |
} | |
.pop-up-close { | |
font-family: 'PT Sans', arial, serif; | |
font-size: 1.1rem; | |
font-weight: bold; | |
color: rgb(140, 140, 140); | |
float: right; | |
cursor: pointer; | |
display: sticky; | |
padding: 3px 6px 3px 5px; | |
border-radius: 4px; | |
transition: background-color 0.5s ease-in-out; | |
} | |
.pop-up-close:hover { | |
color: white; | |
background-color: black; | |
} | |
.pop-up-content { | |
clear: both; | |
} | |
.pop-up-call:hover { | |
cursor: pointer; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment