Develop Reference

Make button close a div (using Wordpress)

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 () {
});
});
});

Bootstrap Modal not adding modal-open class to body when triggered via Javascript

I have a Modal on my page whose content changes depending on which of two buttons is clicked (an <input />'s value changes). To better add functionality, I have set up an additional block of that is supposed to manual open the Modal if there's an error to show.
To make sure the form is "sticky", I manually trigger the click event on the corresponding button and what not. However, when I manually trigger the click event, Bootstrap is not adding .modal-open to the body. Due to how my site is built, without .modal-open on the body, the Modal is completely hidden behind other content.
So obviously I'm doing something wrong, but I have no idea. Here's a copy of my code:
<?php
$modalerror = false;
$id = 0;
if (/*Basic check for errors*/) {
$modalerror = true;
$id = /*Get the correct id*/;
}
?>
<script type="text/javascript">
jQuery( document ).ready(function($) {
$('#modal').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget);
if (button.attr('data-name') && button.attr('data-name') != '') {
$('#name').val(button.attr('data-name'));
} else {
$('#name').val('');
}
});
});
<?php if ($modalerror) { ?>
jQuery ( window ).load(function() {
jQuery('button[data-id=<?php echo $id; ?>]').trigger('click');
});
<?php } ?>
</script>
Upon further inspection/progress, I noticed that it I manually trigger the Modal in the exact same fashion somewhere else on the page/later on, there aren't any problems with adding the .modal-open class to the body. Code sample:
<script type="text/javascript">
function manualOpen(id) {
jQuery('button[data-id="'+id+'"]').trigger('click');
}
</script>
<button type="button" onclick="manualOpen(/*Correct id*/);">Open</button>
Even more testing, I added a second modal to the page with completely different contents that opens automatically under very specific circumstances, it does not need to load custom content based off of a buttons data-* attributes. This second Modal suffers the exact same problem if it doesn't also have some form of timeout (as mentioned in my comment to this question).

Using bootstrap 4, the best way IMO without using timeouts is adding a function in the closing event of the modal.
When a modal is closing and there is a command for open another modal before it completes the closing action, the new modal is open but the class .modal-open is not added to the body.
The next function open a modal checking if there is an opened modal. The new modal is opened directly or in the closing event callback depending of the case. This function requires that every modal has an id.
function openModal(modalid) {
//Looks for current modal open
if ($('.modal.fade.show').length > 0) {
//Gets the id of the current opened modal
var currentOpenModalId = $('.modal.fade.show').attr('id');
//Attaches a function to the closing event
$('#' + currentOpenModalId).on('hidden.bs.modal', function () {
//Opens the new model when the closing completes
$('#' + modalid).modal('show');
//Unbinds the callback
$('#' + currentOpenModalId).off('hidden.bs.modal');
});
//Hides the current modal
$('#' + currentOpenModalId).modal('hide');
} else {
//If is not an opened modal, the new modal is opened directly
$('#' + modalid).modal('show');
}
}

I am using Bootstrap 4.1.1 and jQuery 3.3.1, and faced the same problem. 50ms didn't solved the problem. So, i had to bump it upto 500ms, and it worked!
//hide first
$('#modal1').modal('hide');
//add delay when showing next modal
setTimeout(function () {
$('#modal2').modal('show');
}, 500);

I'm using bootstap 4.3.1 and modified 'bootstrap.min.js' file
//bootstrap.min.js (line : 1646)
this._showBackdrop(function () {
g(document.body).removeClass(ce); // ce = 'modal-open'
t._resetAdjustments(),
t._resetScrollbar(),
...
to
//bootstrap.min.js (line : 1646)
this._showBackdrop(function () {
if (document.getElementsByClassName('modal fade show').length == 0) {
g(document.body).removeClass(ce);
}
t._resetAdjustments(),
t._resetScrollbar(),
...
It works very well

Javascript function interacts with other function

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

how to control accordion event with a button click

i have this script i copied from the internet. i want to control the accordion event(close current div and open next div) with a button
<button> Click me to open next</button>
in the div instead of the
<h3 id="section1">Section 1</h3>
.
Am new to jquery and javascript any help would be well appreciated.
this is the fiddle to my code:fiddle

From your particular fiddle. I modified it a little bit, and bind the button click onto click on <h3> tags, like you were clicking them manually. From there, for every click of button, it just clicks the next <h3>. Consider this example:
$(function () {
$("#accordion").accordion({
activate: function (event, ui) {
//alert($(ui.newHeader).attr("id"))
}
});
$('button').on('click', function(){
var current_index = $(this).parent().next('h3').index();
if(current_index != -1) { // just checks if its the last
$(this).parent().next('h3').trigger('click');
} else {
$('h3#section1').trigger('click');
}
});
});
Sample Fiddle

jQuery custom Confirm

I want to have a very simple custom dialog. When I click remove, I want a simple panel opens up with the option to confirm or cancel. If confirmed, more things will run.
Since I want to use this confirmation in different files, this was my approach:
In index.js that runs on all pages I have:
var confirmation = -1
$(document).ready(function(){
$('html').on({
click: function() {
confirmation = 1;
}
},'#confirmation_yes');
$('html').on({
click: function() {
confirmation = 0;
}
},'#confirmation_no');
});
function confirmAction(callback)
{
if( confirmation == 1 ) {
$('#popup_panel').slideUp('slow', function(){
$('#popup_fader').fadeOut('fast');
});
confirmation = -1;
callback(true);
}
if( confirmation == 0 ) {
$('#popup_panel').slideUp('slow', function(){
$('#popup_fader').fadeOut('fast');
});
confirmation = -1;
callback(true);
}
setTimeout(confirmAction, 50)
}
So my idea was that then inside other JS files, we have
$('#element').click(function(){
confirmAction(function(result){
// do my stuff
});
})
So when I do this, the system returns error and says "callback" is a not a function. What is wrong with this code?
Thanks

I made another approach. It is based on jQueryMobile but can also be used with normal jQuery after a few minor modifications. The basic is simple: you call a function that opens the popup and adds two buttons that react on functions that you provide by calling the opener-function. Here is my example:
function jqConfirm(data) {
var container = $('#genericConfirm');
container.find('h1').html(data.title); // title of the confirm dialog
container.find('p').html(data.message); // message to show
// .off('click') removes all click-events. click() attaches new events
container.find('.yes').off("click").click(data.yes); // data.yes/no are functions that you provide
container.find('.no').off("click").click(data.no);
container.popup({ positionTo: "window" }).popup("open"); // .popup("open") opens the popup
}
var confirmData = {
title: "Send this message?",
message: "Are you sure you want to send this message?",
yes: function() {
sendMessage();
$('#genericConfirm').popup("close");
},
no: function() {
$('#genericConfirm').popup("close");
}
};
jqConfirm(confirmData); // you open the popup with this function (indirectly)
And the HTML part (jQueryMobile specific, must be modified a bit to match plain jQuery)
<div data-role="popup" id="genericConfirm" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Title</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<p style="margin-bottom: 15px;">Message</p>
<div class="ui-grid-a">
<div class="ui-block-a">
Cancel
</div>
<div class="ui-block-b">
Ok
</div>
</div>
</div>
</div>

Attach another handler to the button that deals with the logic. After you are done with the dialog, simply remove the dialog to get rid of the handlers. If you create an other dialog later, maybe with the same or an other layout, you can define different handlers for that dialog. As events 'bubble' up, both the handler on the button itself, as the handler on html (that only fires when the button is clicked), will be fired.
The following is merely pseudo-code, but it should give you an idea what you can do with this:
//This will create the html for your dialog
createMyFancyDialog();
showDialog();
//This is where you'll do the logic for this dialog
$('#confirmation_yes').on( 'click', function() {
doWhatEveryIWantToDo();
//After this dialog is done, destroy the dialog.
//This will get rid of the handlers we don't need in a future dialog.
//The handler attached to html will persist.
destroyDialog();
} );
$('#confirmation_no').on( 'click', function() {
doSomethingMean();
//After this dialog is done, destroy the dialog.
//This will get rid of the handlers we don't need in a future dialog.
//The handler attached to html will persist.
destroyDialog();
} );

I've tried to rewrite and fix your code, but there are too many things to adjust.
So, I strongly recommend you to rewrite your code in a simpler way, like this:
<button id="element">Element</button>
<div id="popup_panel" style="display: none;">
<p>Your msg?</p>
<button id="confirmation_yes" >Yes</button>
<button id="confirmation_no">No</button>
</div>
<script>
$(document).ready(function () {
$('#confirmation_yes').click(actionConfirmed);
$('#confirmation_no').click(actionNotConfirmed);
$('#element').click(showPopupPanel);
});
function actionConfirmed() {
$('#popup_panel').slideUp();
// User confirmed. Now continue.
// e.g. alert('Yes was clicked');
}
function actionNotConfirmed() {
$('#popup_panel').slideUp();
// User said no.
}
function showPopupPanel() {
$('#popup_panel').slideDown();
}
</script>
You can see this code in action here:
http://jsfiddle.net/LGTSK/

Keep it simple:
<!doctype html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<input id='yes' type="button" value="Yes" data-result="Yes" />
<input id='no' type="button" value="No" data-result="No" />
<script type="text/javascript">
var result;
function confirmAction() {
if (result) alert(result);
else setTimeout(confirmAction, 100);
}
$(function() {
$('#yes, #no').on('click', function(e) {
result = $(this).attr('data-result');
});
confirmAction()
});
</script>
</body>
</html>