jquery modal getting it to close when I click elsewhere - javascript

at the moment Im only learning javascript and could do with some help here as Im a little confused as to where to go from here.
I have a site with a modal using jquery, I can get it to show when I click on the image, but when I click elsewhere it doesnt turn it off.
Ive tried toggle, but that makes it turn on and off no matter where I click.
Ive tried hide but that stops it working at all (assuming its applying the hide function even when I click on the link)
Heres what I have so far, any help would be great...
jQuery('#youtube').click(function(){
jQuery('#youtubemodal').show();
});

make an function that checks for youtubemodal that is shown and then hide.
$("document").click(function() {
if( $('#youtubemodal').is(':visible') ) {
$('#youtubemodal').hide();
}
});

Here's what you need to do:
$('#youtube').click(function(){
$('#youtubemodal')
.show()
.on("click", function(e){
e.stopPropagation();
});
$(document).on("click.youtubemodal", function(){
$(this).off(".youtubemodal");
$('#youtubemodal').hide();
});
});​
This is how it will behave:
When you click on the image, the modal appears
When the modal appears, we add a listener to document so that when you click anywhere, the modal is hidden (and the listener is removed as well)
When the modal appears, we also add a listener to it, so that if you click on the modal if doesn't hide it: the modal is only hidden if you click outside of it
Note: if you're not using jQuery 1.7 or above, replace .on() with .bind(), and .off() with .unbind()

I came up with my own workaround for this, where I set up a div with a dark background with an opacity of 40%,that appears throughout the page when the modal is loaded.
#modalbackground {
width:100%;
height:100%;
background-image: url('images/modalbackground.png');
background-repeat: repeat;
position:fixed;
z-index:600;
display:none;
}
I then put this div outside of everything to insure it covers the entire page
<div id="modalbackground"> </div>
I then applied this code to make sure the div and the modal closes when I click on the new dark "background".
jQuery('#youtube').click(function(){
jQuery('#youtubemodal').show();
});
jQuery('#youtube').click(function(){
jQuery('#modalbackground').show();
});
jQuery('#modalbackground').click(function(){
jQuery('#modalbackground').hide();
});
jQuery('#modalbackground').click(function(){
jQuery('#youtubemodal').hide();
});

Related

Divi : Hide Button when clicked

I'm a novice in jQuery coding, and I need help with my code.
I have a button that allows me to reveal a hidden section on my website, but at the moment the button remains even though I want him to disappear.
My website is built with Wordpress and Divi.
With the following code, you will have my latest attempt with the hide/show value in CSS.
<style type="text/css">
.rv_button.closed:after {content:"";}
.rv_button.opened:after {content:"";}
.hide {display:none;}
.show {display:block;}
</style>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#reveal').hide();
jQuery('.rv_button').click(function(e) {
e.preventDefault();
jQuery("#reveal").slideToggle();
jQuery('.rv_button').toggleClass('opened closed');
});
});
</script>
If you want to see what it looks like, you can see the example here: https://divinotes.com/reveal-a-hidden-divi-section-row-or-module-on-button-click/
You're toggling classes named opened and closed, while your CSS shows that hide and show are the ones affecting element's presence in the final render of the page. Also there's probably no need for most classes. You can just add the hide one.
Chance your last non-trivial line to
jQuery('.rv_button').addClass('hide');
If you already have show class applied to the button, then your original idea makes sense. You just need to change the classes to match the ones you defined in styles.
jQuery('.rv_button').toggleClass('show hide');
Just add $(this).hide() in your click function.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#reveal').hide();
jQuery('.rv_button').click(function(e) {
e.preventDefault();
jQuery("#reveal").slideToggle();
jQuery('.rv_button').toggleClass('opened closed');
// Hide button
$(this).hide()
});
});
</script>
Thanks everyone for your involvment in my question. I managed to use the solution of #vmf91 which works like a charm. Thanks again guys and have a lovely day.
Do you want to remove the button after clicking over it? If so, you just need to insert the following line inside the button event:
jQuery(this).hide();
The complete click event:
jQuery('.rv_button').click(function(e) {
e.preventDefault();
jQuery(this).hide();
jQuery("#reveal").slideToggle();
//You don't need this if you want to hide the button
//jQuery('.rv_button').toggleClass('opened closed');
});

Issue with slideIn/Out menu

I have been working on this menu plugin, and its working fine, however there is one problem I've noticed, please see this JSFiddle Demo
When menu is opened, I have added a close button (x) on the top right corner of the menu, when I click on close its sliding to left and hiding but when I click on menu again its not opening but if you click once again it works perfectly.
Can somebody please guide how to make my custom close icon working perfectly, as its doing with outside menu click?
I found that on close click, its removing a class and adding inline css of translate3D which I have done same in my jquery, but no luck
Here is my close jQuery function
$(document).ready(function(){
$('.nav-close').click(function(){
$("#mp-pusher").removeClass('mp-pushed').css("transform","translate3d(0px, 0px, 0px)");
$(".mp-level").removeClass('mp-level-open');
});
});
What you want to do is keep a reference to the menu so you can close it in your event.
https://jsfiddle.net/ps855n8r/14/
var menuItem = new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );
That way in your event you can close like so :
menuItem._resetMenu();
Don't try to close it manually using the DOM, which means your even function becomes like this :
$(document).ready(function(){
$('.nav-close').click(function(el){
menuItem._resetMenu();
});
});
Also helpful for calling other methods on the mlPushMenu object elsewhere. In the above example; menuItem is your reference.

Why is my fadeToggle looping on one certain class?

I am trying to create three clickable divs, one to open, and two to close a popup window. One of the "close" divs works like a charm, however the other loops the fadeToggle. The looping class is .exit (upper left corner, grey box).
Please see JSFiddle; http://jsfiddle.net/StudentEric/zx221ssy/
´$(".maincontainer, .opaquebg").hide();
$("#orange, .exit, .opaquebg").click(function(){
$(".maincontainer, .opaquebg").fadeToggle(500);
});
});´
What have I done wrong?
It is because you are binding the same event for .opaquebg and .exit and .exit is child of .opaquebg. So if you do not stop the #orange click event event, it is going to trigger the event twice just like what you are experiencing right now. Try
e.stopPropagation();
inside of your click event like:
$("#orange, .exit, .opaquebg").click(function(e){
e.stopPropagation();
$(".maincontainer, .opaquebg").fadeToggle(500);
});
Here is your updated fiddle: http://jsfiddle.net/zx221ssy/1/
As a side note, you do not need to fadeToggle your .maincontainer child element since you are already fade toggling your parent .opaquebg. So your code can look like this:
$(function(){
$(".opaquebg").hide();
$("#orange, .exit, .opaquebg").click(function(e){
e.stopPropagation();
$(".opaquebg").fadeToggle(500);
});
});

Set focus to element after slideToggle removes display:hidden attribute with jQuery

So I have looked at a bunch of examples and still cannot seem to figure this one out. I have an element that I am hiding "display:none" until it is expanded by a link using jQuery slideToggle. Working but I need the focus to go to the new element div. I've tried a bunch of examples and nothing seems to be working so I'll post it here.
Here is the fiddle:
JS FIDDLE
So on click of this link here:
<div><p>Blah Blah <a id="whyDivLink" class="staticLinkHelper" title="Wblah blah bl title" style="color: #8f0222; text-decoration: underline">Click Me?</a></p>
</div>
I am trying to do two things, well three but two would be marvelous.
1. Scroll to this DIV which is just a bit further down the page.
2. Focus on the text that is now showing.
Apparently because the node is hidden, then it will not focus to it or something to that affect and it has nothing to scrollTo or when I have tried it just scrolls all the way to the top. But I have a fixed header so that does not work because then it is just hidden. So what I have now is basically working and scrolling to the div and from what I can tell... focusing on it. But I need to set it a ways from the top and when I try it breaks the scrolling. Any one see what I am doing wrong?
$(function() {
$("#whyDivCloser").click(function () {
$("#whyDiv").slideToggle("slow");
});
});
$(function() {
$('#whyDivLink').click(function (evt) {
$("#whyDiv").slideToggle("slow");
});
});
Any help would be appreciated
Looks like when you apply display:none initially to the div, clicking on the a link won't lead user to the targeted div anymore. To fix this, you can try using code to hide the div initially using slideToggle, of course the initial state of the div is display:block, slideToggle will hide it for you instead of setting display:none initially while clicking on the link will work expectedly (jump to the targeted div).
JS:
$(function() {
$("#whyDiv").slideToggle("slow"); //add this line to hide it initially
$("#whyDivCloser").click(function () {
$("#whyDiv").slideToggle("slow");
});
});
$(function() {
$('#whyDivLink').click(function (evt) {
//append .focus() to focus the text
$("#whyDiv").slideToggle("slow").focus();
});
});
Updated Demo.

jquery/javascript: hide div when click anywhere on page except for selected div?

i have div-1 and div-2. when a user clicks on div-1 div-2 is shown. This operates using jquery as a toggle function so when a user re-clicks div-1, then div 2 is hidden again. now i want to add a statement to my jquery that says if the user clicks to another area of the page so an area which is not div-1 then to also hide div-2. can someone please show me how i might do this as i am brand new to jquery and javascript.
thanks
<script type="text/javascript">
$('.notifications').click(function() {
$('.drop_down_column2').toggle();
return false;
});
</script>
It's pretty straightforward:
$('body').click(function() {
$('.drop_down_column2').hide();
});
Because you are returning false from your .notifications click handler, jQuery will prevent propagation of the event up to the body. So in essence, any time you click anywhere, except .notifications, your div will hide.

Categories