I created a popup window using CSS. It is working fine in google chrome; however, it is not displaying in Safari as expected. Above photo is in Safari and the bottom photo is in chrome.
The following code is what I used to create the popup window:
.modal-container {
position: fixed;
background-color: #fff;
left: 50%;
width: 80%;
height: 620px;
max-width: 900px;
padding: 20px;
border-radius: 5px;
-webkit-transform: translate(-50%, -200%);
-ms-transform: translate(-50%, -200%);
transform: translate(-50%, -200%);
-webkit-transition: transform 500ms ease-out;
transition: transform 500ms ease-out;
}
.modal:before {
content: "";
position: fixed;
display: none;
background-color: rgba(0,0,0,.8);
top: 0;
left: 0;
height: 100%;
width: 100%;
}
And this following code is what I used to create my header
.box {
position: fixed;
top:0px;
left: 0;
width: 100%;
padding-top: 20px;
background-color: #fff;
overflow: hidden;
display: block;
z-index: 900;
}
Does anyone have an explanation why in chrome everything looks fine, but in safari not ?
Thanks
Related
I'm developing a new Pop Up-style ad for the site here of the company that I'm working on. But I'm in a different situation where I need instead of running the modal JUST when checked box, but that it always run when the page starts, I've tried too many ways, not successfully, because when I can get it to just show up (which is my goal), the close button no longer works.
I'm sending my code in ATTACHMENT, it's pretty clean, and it's only 25 lines, could you please explain this to me?
Thanks!
HTML:
<!DOCTYPE html>
<html>
<head>
<title>TESTE MODAL</title>
<link rel="stylesheet" type="text/css" href="assets/stylesheets/style.css" />
</head>
<body>
<!--
<script type="text/javascript">
$(document).ready(function()
{
$("#modal_chaves").modal("show");
});
</script>
-->
<label id="" class="" for="modal_chaves">Clique aqui</label>
<input type="checkbox" id="modal_chaves" />
<div id="modal_chaves" class="modal">
<div id="modal_chaves" class="modal-content">
<img src="assets/images/chaves-fotos-raras-4.jpg" />
</div>
<label class="modal-close" for="modal_chaves"></label>
</div>
</body>
</html>
CSS:
label{
margin:0; padding:0; border:0; background:transparent;
/*vertical-align: baseline;*/
}
/* init modal */
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
opacity: 0;
visibility: hidden;
-webkit-transition: all 999s 999s inherit;
transition: all 999s 999s inherit;
}
.modal-content {
padding: 10px;
max-width: 600px;
min-width: 360px;
max-height: 85%;
overflow: auto;
position: absolute;
top: 5%;
left: 50%;
z-index: 2;
opacity: 0;
border-radius: 3px;
background: transparent;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
-webkit-transition: all 999s inherit;
transition: all 999s inherit;
}
.modal-content img {
display: block;
width: 100%;
margin: 10px 0 0;
}
.modal-content p {
padding-top: 10px;
text-align: justify;
}
.modal-close {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
}
.modal-close:after {
content: "X";
float: right;
margin: 5px 5px 0 0;
width: 30px;
height: 30px;
position: relative;
z-index: 3;
text-align: center;
line-height: 30px;
cursor: pointer !important;
background-color: rgba(255,255,255,0.8);
border-radius: 20px;
box-shadow: 0 0 3px #000;
}
input[id*="modal_"] {
position: fixed;
left: -9999px;
top: 50%;
opacity: 0;
}
input[id*="modal_"]:checked + div.modal {
opacity: 1;
visibility: visible;
-webkit-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
input[id*="modal_"]:checked + div.modal .modal-content {
opacity: 1;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
-webkit-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
transition-delay: 0.5s;
}
#media screen and (max-width: 767px) {
.modal-content {
padding: 10px 5%;
min-width: 88%;
}
}
I have this icon for exiting modal which stays perfectly fixed when scrolling down on Chrome, but I noticed it doesn't work in other browsers like Firefox and Safari.
I also notited that the icon is little off in the right corner but after split second it reposition itself where it should be. Any ideas what's causing this? Is it because the parent which is the modal is of position fixed and you can't have fixed position inside fixed container? I'm still learning HTML.
.outer {
position: fixed;
top: 0;
width: 70px;
cursor: pointer;
z-index: 3;
right: 0;
margin: 20px 20px 0px 0px;
}
.inner {
width: inherit;
text-align: center;
}
.inner::before, .inner::after {
position: absolute;
content: '';
height: 1px;
width: inherit;
background: #FFC107;
left: 0;
transition: all .3s ease-in;
#animatedModal3 {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
overflow-y: auto;
z-index: 9999;
opacity: 1;
animation-duration: 0.6s;
}
.inner::after {
bottom: 50%;
transform: rotate(-45deg);
}
.inner::before {
top: 50%;
transform: rotate(-45deg);
}
<div id="animatedModal3" class="bg-black">
<div class="close-animatedModal3 py-3 bg-black">
<div class="outer">
<div class="inner">
<label class="label2">Back</label>
</div>
</div>
</div>
</div>
You have a bracket that is not closed here .inner::before, .inner::after {...
here I am trying to move a div left to right with jquery. The js I have written is partially working. I can move the div as intended (left to right) in some pages in Chrome, Opera and Yandex browser, but it does not work at all in firefox, so I believe the implementation is not up to the par and there must be some more concrete and efficient ways of doing it. With the following code snippet, a div (a fb like pop-up) shows up followed by page load a few seconds later and the effect is sliding the div from left to right. There is a close button. Upon clicking the close button, the div shrinks back (now right to left effect). I have given full code with style for the ease of full understanding. Any insights you offer to me will be of great help. Thank you. (the js code is given at the end)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class = "modal-prompt modal-prompt-shown" id = "fb_like" style = "display: none; z-index: 10000; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;">
<style>
.modal-overlay {
/* overflow-y: scroll; */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
background-color: rgba(0, 0, 0, 0.5);
/* dim the background */
cursor: pointer;
}
.modal-close-half-page {
background: none;
color: white;
font-weight: bold;
position: fixed;
right: 50px;
font-size: 14px;
}
.modal-prompt-half-page {
display: block;
height: 100%;
position: fixed;
width: 50%;
background-color: #1fc2ff;
top: 0;
left: 0;
z-index: 1000000;
}
.modal-prompt-half-page-arrow {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #1fc2ff;
position: absolute;
top: 50%;
right: -30px;
margin-top: -30px;
}
.modal-prompt-half-page-header {
font-weight: bold;
font-size: 57px;
padding: 0 40px;
text-align: right;
line-height: 58px;
color: white;
text-transform: inherit;
top: 50%;
position: absolute;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin-bottom: 0;
}
.social-prompt-button-facebook {
width: 101px;
height: 101px;
-moz-border-radius: 101px;
-webkit-border-radius: 101px;
border-radius: 101px;
background-color: white;
position: absolute;
left: 110%;
top: 50%;
margin-top: -51px;
}
.social-prompt-button-facebook .fb-like {
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -24px;
}
.modal-prompt-half-page {
left: calc(-40% - 30px);
transition: left 0.4s ease;
width: 40%;
min-width: 450px;
}
.modal-overlay {
opacity: 0;
transition: opacity 0.4s ease;
top: 0;
}
.social-prompt-button-facebook {
overflow: hidden;
position: fixed;
top: 0;
bottom: 0;
left: calc(40% + 60px);
margin: auto 0;
width: 101px;
height: 101px;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
transition: height 0.4s ease, width 0.4s ease, transform 0.4s ease;
}
.modal-copy-container{
font-size: 5vw;
line-height: 5vw;
margin-top: 0;
}
.modal-prompt-shown .modal-prompt-half-page {
left: 0;
}
.modal-prompt-shown .modal-overlay {
opacity: 1;
}
.modal-prompt-shown .social-prompt-button-facebook {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
#media (max-width: 1125px) {
.modal-prompt-half-page {
width: 450px;
left: -480px;
}
.modal-prompt-shown .modal-prompt-half-page {
left: 0;
}
.social-prompt-button-facebook {
left: 510px;
}
.modal-copy-container {
font-size: 800 normal 3.125rem / 3.125rem WorkSans, sans-serif;
/* line-height: 56px; */
}
}
</style>
<div class = "modal-overlay"></div>
<div class = "modal-prompt-half-page">
<div class = "modal-close modal-close-half-page" onclick = "closeFB();">Close</div>
<h6 class = "modal-prompt-half-page-header modal-copy-container">If you liked reading this story, then Like our page!</h6>
<div class = "modal-prompt-half-page-arrow"></div>
<div class = "modal-prompt-half-page-cont clearfix">
<div class = "social-prompt-button-facebook">
<div class = "fb-like fb_iframe_widget" data-href = "#" data-layout = "button" data-action = "like" data-show-faces = "false" data-callback-id = "genmodalfb" data-keen-tracking-name = "newUserModalV1" data-keen-social-channel = "facebook" data-keen-custom = "Halfpage 1.32" fb-xfbml-state = "rendered" fb-iframe-plugin-query = "action=like&app_id=141861192518680&container_width=0&href=https%3A%2F%2Fwww.facebook.com%2FMicMedia&layout=button&locale=en_US&sdk=joey&show_faces=false">
<span style = "vertical-align: bottom; width: 49px; height: 20px;">
<iframe name = "f1be53ad29d6424" width = "1000px" height = "1000px" frameborder = "0" allowtransparency = "true" allowfullscreen = "true" scrolling = "no" title = "fb:like Facebook Social Plugin" src = "#" class = "" style = "border: none; visibility: visible; width: 49px; height: 20px;"></iframe>
</span>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
setTimeout(function () {
// $('.modal-prompt').css('display', 'block').fadeIn("slow", function () {});
$('.modal-prompt').animate({width: 'show'});
}, 5000);
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$(".modal-close").click(function () {
$(".modal-prompt").animate({
width: "hide"
});
});
});
</script>
Toggling 'hide' defaults to right-to-left
It doesn't work at all. I'm not sure why you're using so much code, but all you have to do for sliding to the left is use the JQuery animate function, like so:
$('#elementId').animate({
left: '50%',
}, 500 );
You can do this in sequence as to make it left to right and vice versa. No CSS is needed for animations or anything, just the basic stylings.
I'm using Navigation using a plugin called Hamburgler and it works fantastic on desktop. However, on mobile, the navigation appears, but it can't be clicked.
The coding for the site I'm trying to edit is a bit janky, my apologies.
Navigation coding:
JS
<script type="text/javascript">
// HAMBURGLERv2
function togglescroll() {
$('body').on('touchstart', function(e) {
if ($('body').hasClass('noscroll')) {
e.preventDefault();
}
});
}
$(document).ready(function() {
togglescroll()
$(".icon").click(function() {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$("body").toggleClass("noscroll");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
});
// PUSH ESC KEY TO EXIT
$(document).keydown(function(e) {
if (e.keyCode == 27) {
$(".mobilenav").fadeOut(500);
$(".top-menu").removeClass("top-animate");
$("body").removeClass("noscroll");
$(".mid-menu").removeClass("mid-animate");
$(".bottom-menu").removeClass("bottom-animate");
}
});
</script>
HTML
<a href="javascript:void(0)" class="icon">
<div class="menui top-menu"></div>
<div class="menui mid-menu"></div>
<div class="menui bottom-menu"></div>
</a>
<div class="mobilenav">
<div class="insidenav">
2016 Salary Guide
2015 Salary Guide
2014 Salary Guide
</div>
</div>
CSS
#navigation {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 80px;
background-color: #fff;
z-index: 994;
}
.top-animate {
background: #e71630 !important;
top: 13px !important;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 999 !important;
}
.mid-animate {
opacity: 0;
z-index: 999 !important;
}
.bottom-animate {
background: #e71630 !important;
top: 13px !important;
-webkit-transform: rotate(-225deg);
transform: rotate(-225deg);
z-index: 999 !important;
}
.top-menu {
top: 5px;
width: 25px;
height: 2px;
border-radius: 10px;
background-color: #000;
z-index: 999 !important;
}
.mid-menu {
top: 13px;
width: 25px;
height: 2px;
border-radius: 10px;
background-color: #000;
z-index: 999 !important;
}
.bottom-menu {
top: 21px;
width: 25px;
height: 2px;
border-radius: 10px;
background-color: #000;
z-index: 999 !important;
}
.menui {
background: #000;
transition: 0.6s ease;
transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
margin-top: 10px;
position: absolute;
z-index: 999 !important;
}
.icon {
z-index: 999 !important;
display: block;
padding: 9px;
height: 32px;
width: 32px;
position: fixed;
right: 30px;
top: 15px;
}
.mobilenav {
font-family: inherit;
top: 0;
left: 0;
z-index: 995 !important;
display: none;
position: fixed;
width: 100%;
height: 100%;
background: #FFF;
opacity: 0.98;
}
.insidenav {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
width: 100%;
max-width: 300px;
}
a.inside {
z-index: 2147483647;
display: block;
width: 300px;
height: 70px;
background-color: #dd152e;
color: #FFF;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
text-align: center;
line-height: 70px;
text-transform: uppercase;
-webkit-transition: background .5s ease-in-out;
-moz-transition: background .5s ease-in-out;
-ms-transition: background .5s ease-in-out;
-o-transition: background .5s ease-in-out;
transition: background .5s ease-in-out;
margin-bottom: 50px;
text-decoration: none;
}
a.inside:hover {
background-color: #c21228;
}
Here's the site itself:
http://salaryguide.diamondbacklab.com
Sorry, I know it's a lot of code to look at. Any help would be super appreciated!
You need to remove these lines from JavaScript:
if ($('body').hasClass('noscroll')) {
e.preventDefault();
}
to make it work. Because preventDefault() also prevents standard browser behaviour.
I have a CSS class which is added by javascript to a div with id to reveal and animate it. It works in the browser but not on Cordova mobile app:
#lobbyme {
position: absolute;
background-color: #F4A716;
width: 60%;
top: 10px;
left: 20%;
height: 8%;
padding: 4%;
color: #fff;
-webkit-transform: translate3d(0px,0%,0);
-webkit-transition: all 0.5s ease;
border-radius: 100px;
opacity: 0;
/* z-index: 0; */
transform: translate3d(0px,0%,0);
}
#lobbyme.animatelobbyme {
-webkit-transform: translate3d(0px,100%,0)!important;
opacity: 1;
transform: translate3d(0px,100%,0)!important;
}
I've tried both javascript and refuse to work on mobile:
$("#lobbyme").addClass("animatelobbyme");
$("#lobbyme").css({"opacity":"1", "-webkit-transform":"translate3d(0px,100%,0)"});
When running
alert("opacity" +$("#lobbyme").css('opacity')); I still get opacity 0.