I am using this css3 modal https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_target_modal
Not sure how to open and close it with javascript or jQuery
This opens on click via :target
Tried with $('#beforeYouGo').click() and document.getElementById("beforeYouGo").addEventListener('click', hide, false); with no results.It's first time when I use this css3 modal and not sure how to handle it.
I need to open it when user is moving mouse to leave the website, I have the function for that but can't target the modal.
Any help please?
Fixed with this, until I find a better solution:
on mouse leaving I use modal.addClass('active'); the css:
.modal.active,
.modal:target {
display: table;
position: absolute;
}
and for close modal.removeClass('active');
Related
I want to create mobile menu. This same menu I want to use in desktop amd mobile screen but style is a little bit diffrent. In mobile screen menu is hide but hamburger menu is display. When user click the cross in menu, this's going to close. It's very simple. On desktop screen menu is display all the time. Code look like this:
$('.hamburgermenu').on('click', function(){
$('.menu').fadeIn();
});
$('.close').on('click', function(){
$('.menu').fadeOut();
});
It works correctly but css manage to visibility too. I use #media to hide and display menu
#media(min-width: 1200px){
.menu{
position: relative;
display: block;
}
}
And this is my problem. If user close the menu (click on .close, menu doesn't display after change size of browser. For example - I'm testing my website in small window and I close the menu. After I open fullsize window, the menu won't to display.
The problem is when you use fadeOut() on an element, the display of that element remains hide(look at your console and check the inline style of this element).
use $(window).resize(function() {}) to remove inline styles affected by fadeOut() in sizes that you consider as media breakpoint.
One way would be to detect when the user changes the window size, e.g.:
$(window).resize(function(d){
if (window.innerWidth > 1200) {
$('.menu').fadeIn();
}
})
I need a toggle function for a dialog popup that locks page scroll, but permits the dialog to be scrollable.
I have tried CSS only with, but the code does not work in Safari iOS.
body{overflow:hidden; } //does not work in Safari iOS
So, i think I may need to use some JS magic for this to work. Any Ideas? thx.
You can toggle a class on the body to stop the scrolling: http://codepen.io/J_Mack/pen/zGMGyM
.stop-scrolling {
width: 100vw;/*can also use %*/
height: 100vh;/*can also use %*/
overflow: hidden;
}
Read before you use vw/vh: http://caniuse.com/#feat=viewport-units
When I have a page load into the popup lytebox window, I want only the window contents to be scrollable and NOT the page behind (so that you don't click off and then lose your place).
I've tried a few things using variations of
document.body.style.className = "noscroll";
Here is the css I used that I added:
.noscroll { position: fixed; overflow-y:hidden }
.yesscroll { position: static; overflow-y:auto }
I've also tried this using just "overflow". No luck either.
I tried using an "onClick" and I also used Lytebox's own Event Callbacks to call a script to set the new class onLoad with BeforeStart and onunload with AfterEnd.
But nothing is working—not even when I put an alert() in the code to check if it's being called at all. Does anyone have any experience with this?
Thanks!
My issue is available at http://www.jeremiahbenes.com/#/portfolio by clicking on one of the tiles. I tested this in the latest release of Chrome for Mac and experienced the issue described below.
I have implemented fancybox, but when the iFrame appears, I am unable to close it. The "x" in the top-right corner appears to be unclickable. Here is what I have for my implementation:
<a data-fancybox-type="iframe" class="fancybox fancybox.iframe plink" href="http://gegarageenvy.com">
<span>GE Garage Envy</span>
</a>
The code I have for Fancybox is:
<script type="text/rocketscript" data-rocketoptimized="true">
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>
Why does it not close?
(On another note, how can I set it to automatically take up 95% of available height and width? I tried using autosize, but that does not work).
Thanks for your help.
There is a class in your body tag which is disabling pointer events, which is stopping you from being able to click anything inside that fancybox,
.impress-enabled {
pointer-events: none;
}
If you remove this class from the body, then everything inside of fancybox become clickable.
Otherwise you can add,
pointer-events: auto !important;
to the CSS of .fancybox-wrap.
Ok, after googling a bit I found this solution. It's similar to that what #NZ Mikey said:
Add following CSS...
.fancybox-wrap {
pointer-events: auto;
}
The problem is a known one and can be found here:
https://github.com/jmpressjs/jmpress.js/issues/85
https://github.com/bartaz/impress.js/issues/172
I am using custom dialog-box for confirmation message it will appear correctly but the back view of page is clickable/enable so user can click anywhere i want to disable that back view.
Just like native js alert, confirm box do.
Following is image of js alert box in which all back view is not accessible how do i achieve this thing when i am using my custom boxes.
Try this....
HTML:
<div id="alert-overlay-wrapper"></div>
CSS:
#alert-overlay {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
Add the html div in the html of the custom alert box as well add the css.
This work as the overlay for the body.
The one thing you have take care is that the "z-index" of the custom alert box must be greater than 1000 as overlay z-index is 1000.
You may try jQuery Alert or a similar plugin.
Logic: Create a div with lightbox like effect. The lightbox will cover the entire page.
The best example of your situation is bootstrap modals Bootstrap modal
Just see how twitter developers do it.
You can try :-
Twitter boot strap modol box : Modol Box
jQuery Fancybox : Fancybox
jquery Colorbox : Colorbox