I'm trying to create a basic modal myself and I'm having a little bit trouble here (maybe it's because I'm an expert working with jQuery - don't take it seriously).
I have this HMTL markup:
<div id="modal-boxes">
<div id="modal-updates" class="modal-content">
Content for modal box here.
Close
</div>
</div>
<div id="modal-mask"></div>
So, I made a function that tells the modal box to close and to make disappear the #mask div. And another one to when I click outside of it, it closes anyway. In other words, clicking outside the #modal-updates div is the same that clicking on close button. But the problem is that when I want to click inside the #modal-updates div (should not disappear) it closes anyway. Here is my javascript code:
$(".modal").click(function(e){
e.preventDefault(); // Cancel the default link behavior
$("#modal-mask").fadeTo(400, 0.4);
$("#modal-boxes").fadeIn();
var getName = "#" + $(this).attr("name");
$(getName).fadeTo(400, 1);
});
function closeModal() {
$("#modal-mask, #modal-boxes").fadeOut();
}
$(".close-modal").click(function(e){
e.preventDefault();
closeModal();
});
$(".modal-content").click(function(){
closeModal();
});
Any help?
Regards, Tiago Castro
Try:
$('#modal-updates').click(function(e) {
e.stopPropagation();
});
If done right, this will stop $("#modal-boxes").click() from triggering.
[edit] fixed a typo and added link to jsFiddle with it working
Why not using the modal dialog of jQuery?
About your example :
1) for the link I prefer to do something like:
Close
That way no need to deal with things like preventDefault or click event
2)I guess that instead of binding your click event to ".modal-content" you wanted to bind it to "#modal-mask" ;)
Related
I'm making a leaflet map for my own website, I'm not good at javascript html and css, so that's why I going to ask this question here..
Is there anybody who know how to add a X (Close button) to the right corner?
The code I am using can be found over here:
http://jsfiddle.net/z1nw3pt4/2/
layer.on('click', function (e) {
document.getElementById("info").innerHTML = feature.properties.name;
$("#feature_infos").stop();
$("#feature_infos").fadeIn("1000");
console.log(feature.properties.name);
});
The code above her is for opening the popup.
When you click any of the dots, the info box is shown using
$("#feature_infos").fadeIn("fast");
You can add an extra element inside the box that does the opposite (.fadeOut("fast")) when you click it:
HTML:
<span class="close">X</span>
JS:
$('.close').click(function() {
$('#feature_infos').fadeOut('fast');
});
Working demo: jsFiddle
The only styling I added is to position the X in the top right, but obviously you can do whatever you want with it. All that matters is binding the fadeOut method to the click event to close the popup again.
Once my pop up box has faded in, i want it to fade away when the user clicks away from pop up box.
Currently, it fades in and then fades straight back out again.
Jquery
function jsRef(){
$('#footButton').click(function(){
$('#refPop').fadeIn(1000);
});
$('body').click(function(){
$('#refPop').fadeOut(1000);
});
HTML
<button id="footButton" onClick="jsRef()" type="button">References</button>
EDIT**
The file in question is sitting at the bottom of a main file via PHP include.
The pop up box should fade out when the body of the main file is clicked
Add e.stopPropagation() to the button click or add the body click event after you opened the popup.
Like:
$('#footButton').click(function(){
$('#refPop').fadeIn(1000);
$('body').click(function(){
$('#refPop').fadeOut(1000);
});
});
Or:
$('#footButton').click(function(e){
e.stopPropagation()
$('#refPop').fadeIn(1000);
});
$('body').click(function(){
$('#refPop').fadeOut(1000);
});
I would definitely prefer the e.stopPropagation() solution.
Also you dont need you function jsRef() in the onClick attribute of the button.
I think you need to use event.stopPropagation() to prevent click event on the button buble up the DOM tree:
$('#footButton').click(function(e){
e.stopPropagation();
$('#refPop').fadeIn(1000);
});
You're also missing a closing bracket of your jsRef function:
function jsRef(){
$('#footButton').click(function(){
$('#refPop').fadeIn(1000);
});
} // <-- Here
The problem is both events are being fired which is causing the modal to be shown and then hidden immediately. I'd go about this in a different way, separating your modal content from your modal wrapper, making the modal fade out when the user clicks the modal wrapper:
<button>Show modal</button>
<div class="modal wrapper"></div>
<div class="modal body">I'm a modal!</div>
CoffeeScript (This isn't Javascript but is a "tiny language that compiles" into JS, hopefully you get the idea):
$('button').click ->
$('.modal').show()
$('.modal.wrapper') .click ->
$('.modal').hide()
Working JSFiddle with some SCSS styling (again, SCSS isn't CSS, it's a language that's compiled into CSS).
I have this JavaScript code that enables a accordion menu to function, it works, kinda...
When I click the link, it indeed drops down as it should, but when I click it again, it comes back up, then goes down again, not hiding as I would like. The only way to hide the element just opened, is to click the next element on the menu, then the first one will close and the second will open.. Can this be modified to make the element that is opened, close and stay closed, instead of closing and just opening right away.
Code:
// JavaScript Document
$(document).ready(function() {
//ACCORDION BUTTON ACTION
$('div.accordionButton').click(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});
//HIDE THE DIVS ON PAGE LOAD
$("div.accordionContent").hide();
});
<div id="wrapper">
<div class="accordionButton"><strong>Subject:</strong></div>
<div class="accordionContent">Text</div>
<div class="accordionButton"><strong>Subject:</strong></div>
<div class="accordionContent">Text</div>
<div class="accordionButton"><strong>Subject:</strong></div>
<div class="accordionContent">Text</div>
</div>
Change:
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
to be
$('div.accordionContent').not($(this).next()).slideUp('normal');
$(this).next().slideToggle();
It could be an event bubbling issue, but without full code, it's hard to say. You might try including 'return false' at the end of your click listener to stop bubbling and ensure that no default behaviors execute.
I'm working on this site: http://dev.rjlacount.com/treinaAronson/index.php
My final to-do is to set the contact panel (which you can see if you click the top left "contact" button) to close if it's currently open and the user either clicks outside of the panel (in the "#content" area) or hits the esc key.
I figured the clicking in the #content area trigger would be the easier of the two, so I started with that. I've read a couple threads on triggering functions only if elements are visible, but what I've come up with so far isn't working at all:
$("#panel").is(":visible") {
$("#content").click(function(){
$("#panel").slideToggle("3000");
});
};
This breaks the functionality of the contact button, and I've tried several variations of this to no avail. Am I making any glaring errors here? Any advice would be greatly appreciated.
Thanks!
Bind Click and Keydown functions to the document and make sure the click function doesn't bubble up to the document when your panel or flip buttons are clicked. Like so:
$(document).bind({
keydown:function(e) {
if (e.keyCode == 27 ) {
$("#panel").slideUp("3000");
}
}, click: function(e) {
$("#panel").slideUp("3000");
}
});
$('#flip, #panel').bind('click', function(e){return false});
Why don't you add a class to the body of the page when the panel is opened and remove it when it's closed? That makes this much simpler:
$('.class #content').click(function(){
// Close the contact panel
});
Now, when the body has a class of 'class', any click on the #content div will automatically close contact.
Make sense? Great looking site, by the way.
$('#flip').bind('click', function(){
$(this).toggleClass('contactOpen');
$("#panel").slideToggle("3000");
});
$('#content').bind('click', function(){
if($('#flip').hasClass('contactOpen')){
$(this).toggleClass('contactOpen');
$("#panel").slideToggle("3000");
}
});
In a very simple jQuery modal, I close the modal by clicking on CLOSE as
$('#close').click(function(e) {
e.preventDefault();
$('#overlay, #alertModalOuter').fadeOut(400, function() {
$(this).remove();
});
});
How can I close the modal by clicking whether on CLOSE button (which is inside the modal windows) OR clicking anywhere outside the modal window.
Changing your function like so should work:
$('#close, #overlay').click(function(e) {
e.preventDefault();
$('#overlay, #alertModalOuter').fadeOut(400, function() {
$('#close').remove();
});
});
I found it helpful to include:
$('.item-modal').click(function(e) {
e.stopPropagation();
});
Add the same click listener to your overlay.
I know this question pertains to jQuery, but here's how I did this in Vue on my modal component in case anyone finds it helpful. My modal HTML is basically lifted directly from this: https://v2.vuejs.org/v2/examples/modal.html
I set two #click attributes, one on the outermost modal element (modal-mask) that calls my close() method (which emits the close event to the parent component) and one on the actual modal window element (modal-container) that with the .stop event modifier (#click.stop) to stop the click from bubbling up to the parent element (modal-mask). Works like a charm.