I'm still learning js, I'd like to find a way to reduce all the code I put below, I want to open different modals and close them in html.
In the Open modal section as you can see I made a function per modal where the "varEdit-button" is the ID I assigned to each button to open them and the "var-modal" ID is the one I assigned to each different modal container.
In the Close modal section the "close-varModal" is the ID I assigned to each close container and the "var-modal" again is the ID for each modal container.
I'd like to reduce the code with a for loop or maybe another property of js.
For example, I tried to close all the modals just by assigning the same class .close to all the close containers but only the first modal I opened could close and if someone knows why that happens with this language I'd appreciate it!
//OPEN MODALS
document.getElementById('imageEdit-button').addEventListener('click',
function (){
document.querySelector('#pic-modal').style.display = 'flex';
});
document.getElementById('curpEdit-button').addEventListener('click',
function (){
document.querySelector('#curp-modal').style.display = 'flex';
});
document.getElementById('phoneEdit-button').addEventListener('click',
function (){
document.querySelector('#phone-modal').style.display = 'flex';
});
document.getElementById('addressEdit-button').addEventListener('click',
function (){
document.querySelector('#address-modal').style.display = 'flex';
});
// CLOSE MODALS
document.querySelector('#close-picModal').addEventListener('click',
function (){
document.querySelector('#pic-modal').style.display = 'none';
});
document.querySelector('#close-curpModal').addEventListener('click',
function (){
document.querySelector('#curp-modal').style.display = 'none';
});
document.querySelector('#close-phoneModal').addEventListener('click',
function (){
document.querySelector('#phone-modal').style.display = 'none';
})
document.querySelector('#close-addressModal').addEventListener('click',
function (){
document.querySelector('#address-modal').style.display = 'none';
})
One option is to give the open and close buttons an attribute, perhaps in the dataset, that specifies the ID or (unique) class of the element to open/close. For example:
for (const button of document.querySelectorAll('button[data-target]')) {
button.addEventListener('click', () => {
const target = document.querySelector('#' + button.dataset.target);
target.classList[button.matches('.close') ? 'add' : 'remove']('closed');
});
}
.closed {
display: none;
}
<button data-target="imageEdit">open image edit</button>
<div id="imageEdit" class="closed">
<h3>image edit</h3>
<button class="close" data-target="imageEdit">close</button>
</div>
For additional sections, simply add more HTML, adjusting the data-targets as needed.
You could also tweak the logic so that a click on any of the buttons will toggle the current state of the target, if you wanted, simplifying the line inside the click listener to
target.classList.toggle('closed');
Related
I'm using a plug-in (PopUp Maker) to create a pop-up landing page. Inside it I have a button (made by me) that should close this pop-up.
I have no clue how to do it. I tried adding some javascript but is not working, and the thing is that I don't know if it's my code that isn't correct, Wordpress not reading my javascript file, or the plug in preventing me from doing it.
Any suggestions?
Here's the code I tried:
$(document).ready(function() {
$('.close-button').on('click', function(){
$(this).parent().fadeOut('slow', function(){
});
});
});
Here is a Native Javascript Solution to Close or open a Div by onclick.
function myFunction(){
if (document.getElementById('idofpopupdiv').style.display == "none") {
document.getElementById('idofpopupdiv').style.display = 'block';
document.getElementById('idofpopupdiv').style.visibility = 'visible';
} else {
document.getElementById('idofpopupdiv').style.display = 'none';
document.getElementById('idofpopupdiv').style.visibility = 'none';}}
and your button should have an onclick event to call the function.
<button onclick="myFunction();">Button Name</button>
Hope this helps.
Just replace #idofpopupdiv with the id of your popup div or a classname
$(function() {
$('.close-button').click(function() {
$('#idofpopupdiv').fadeOut('slow', function () {
});
});
});
I'm used to working with jQuery but I'm trying to get back to vanilla javascript. I have a link that when clicked will reveal an account modal.
I also want to change the class of the modal when clicked to 'modal-visible'. This works as expected, but then when I click the link again to close the modal, I need the class to change back to 'modal-hidden'.
I wondered if someone could help me with that. Perhaps it needs a toggle instead?
var accountModal = document.getElementById("account-modal");
document.querySelector('#account-photo').addEventListener('click', function(e) {
e.preventDefault();
accountModal.classList.add('modal-visible');
accountModal.classList.remove('modal-hidden');
accountModal.setAttribute('aria-hidden', 'false');
});
<a id="account-photo" href="/customer" tabindex="0" aria-expanded="false">Account</a>
<div id="account-modal" class="modal-visible" aria-label="Account Information" aria-hidden="false">Account Info</div>
Here's a way of doing it if we assume it always begins closed:
document.querySelector('#account-photo').addEventListener('click', function() {var is_visible = false; return function(e) {
e.preventDefault();
if(!is_visible) {
accountModal.classList.add('modal-visible');
accountModal.classList.remove('modal-hidden');
accountModal.setAttribute('aria-hidden', !is_visible);
is_visible = true;
} else {
accountModal.classList.remove('modal-visible');
accountModal.classList.add('modal-hidden');
accountModal.setAttribute('aria-hidden', !is_visible);
is_visible = false;
}
}});
This method basically acts as a manually coded toggle.
I am completely new to javascript (and jquery) and have been experimenting with drop down menus the past couple of days. I found this one fancy notification menu, and I tried to see what happens when I have two of them on the page. Anyways, I made a quick example of my problem here:
http://jsfiddle.net/rgt03mu4/24/
The problem is that I can have both notification containers open up if I click on both.
If I am already clicked on one of the bells, then I click on the other, it should close the other one. Instead it keeps it open, and even when you click on the other container one, it still doesn't close it. You have to click off the page or click the notification bells. I am trying to make it to where you can only have one open at a time. So in order to do this, I tried changing the names of the functions:
As you can see:
$(function() {
var nContainer = $(".notification-popup-container");
//notification popup
$("#notification-link").click(function() {
nContainer.fadeToggle(300);
return false;
});
//page click to hide the popup
$(document).click(function() {
nContainer.hide();
});
//popup notification bubble on click
nContainer.click(function() {
return false;
});
});
I added the next function to be called test(), which you would think, since it's an entirely new function it would work differently. Instead, the error still persists.
What am I doing wrong? I even gave the the new bell it's own divs and link name. I also renamed container to container2.
Set the global variable for your container:
var nContainer = $(".notification-popup-container");
var nContainer2 = $(".notification2-popup-container");
$(function() {
var nContainer = $(".notification-popup-container");
//notification popup
$("#notification-link").click(function() {
nContainer.fadeToggle(300);
nContainer2.hide(); //hide the second container
return false;
});
//page click to hide the popup
$(document).click(function() {
nContainer.hide();
});
//popup notification bubble on click
nContainer.click(function() {
return false;
});
});
And you can do same with other function.
DEMO
There is no need to give the popup containers different classnames.
I would give the a-tags a common classname instead of an id. The href can be used to identify the target popup, so the binding between the link and the target popup is set in the origin of action. The JS part would be abstracted and could be reused.
<a class='notification-link' href='#firstpopup'>X</a>
<a class='notification-link' href='#secondpopup'>X</a>
<div class='notification-popup-container' id="firstpopup">
... firstpopup
</div>
<div class='notification-popup-container' id="secondpopup">
... secondpopup
</div>
The click handler first hides all the popups before opening a new one.
$(".notification-link").click(function () {
$(".notification-popup-container").hide();
var targetId = $(this).attr('href');
$(targetId).fadeIn(300);
return false;
})
working example: http://jsfiddle.net/qyLekdwk/
The problem here is how the event propgation is handled
$(function () {
var nContainer = $(".notification-popup-container");
//notification popup
$("#notification-link").click(function () {
nContainer.fadeToggle(300);
});
//page click to hide the popup
$(document).click(function (e) {
if (!$(e.target).closest('#notification-link, .notification-popup-container').length) {
nContainer.hide();
}
});
});
$(function test() {
var nContainer2 = $(".notification2-popup-container");
//notification popup
$("#notification2-link").click(function test() {
nContainer2.fadeToggle(300);
});
$(document).click(function (e) {
if (!$(e.target).closest('#notification2-link, .notification-popup-container').length) {
nContainer2.hide();
}
});
});
Demo: Fiddle
I'm using the following code to open my Modal.
The modal opens as expected - and appends open to the parent class. However, when 'close' is clicked, it doesn't close & close is not added to the class.
Can someone explain why?
<script type="text/javascript">
jQuery(document).ready(function($) {
$window = $(window)
$(".modal-trigger").click(function(e) {
e.preventDefault()
var id = $(e.target).attr("href")
$(id).addClass("open")
$(id).find('.close').click(function(e) {
e.preventDefault()
$(e.target).parent().removeClass(".open")
});
})
});
</script>
My Close button HTML:
<button class="close icon-close"></button>
I don't think that parent() brings you to correct level. Instead try to remove .open class from the element you add this class in the first place, i.e. $(id):
$(".modal-trigger").click(function(e) {
e.preventDefault();
var id = $(e.target).attr("href");
$(id).addClass("open");
$(id).find('.close').click(function(e) {
e.preventDefault();
$(id).removeClass("open");
$(this).off();
});
});
Also you probably want to unbind click event from close button, otherwise it will bind multiple times.
I want my navigation to fade-in when a special button is clicked, and to fade away when the user is clicking somewhere else - doesn't matter where.
My Script looks like this:
function showText() {
var spoiler = document.getElementById('spoiler');
var button = document.getElementById('navicon');
if (spoiler.style.display == 'block') {
spoiler.style.display='none';
button.value = 'Text einblenden';
} else {
spoiler.style.display='block';
button.value = 'Text ausblenden';
}
return false;
}
My workaround was to give every navigation element the following code snippet.
onclick="$('#thedivlayeriwanttofadeout').fadeOut('slow');"
Can anybody help me?
Use bubbling to attach a single click handler to a common parent element (for example, body).
Here's a simple example:
$(function () {
$("#myButton").click(function (e) {
$("#hidden").fadeIn();
return false;
});
$("#parent").click(function() {
$("#hidden").fadeOut();
});
});
Clicking the button will fade in the element with id hidden. Clicking anywhere in parent will fade it out again.