We Keep Coding

How to close modal when <a> inside <li> is clicked?

I have managed to create a modal cum tab.
When user clicks the black color button, a modal appears with the list options. And as per user's selection content is shown.
I'm sharing the entire code below.
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("modalbtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// Get the li links that will change tabs
var link = document.getElementsByClassName("modallink");
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks on <span> (x), close the modal
link.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
setButtonInnerText(document.querySelector(".dropbtn"))
function openPage(id, a) {
const p = document.querySelector("[tab-name='" + id + "']");
const tabs = document.querySelectorAll(".tabs .dl-tabcontent");
for (var x = 0; x < tabs.length; x++)
tabs[x].classList.add("d-none");
if (p !== null) {
document.querySelector(".dropbtn").innerHTML = a.innerHTML;
p.classList.remove("d-none");
}
}
function toggleDrop(drop) {
drop.classList.toggle("d-none");
drop.onclick = function(e) {
drop.classList.add("d-none");
}
}
function setButtonInnerText(btn) {
const firstOption = btn.parentElement.querySelector("#drop a:first-child");
btn.innerHTML = firstOption.innerHTML;
}
h1,
h2,
h3 {
line-height: 1.35;
}
h1 {
font-size: 32px;
}
h2 {
font-size: 26px;
}
h3 {
font-size: 22px;
}
/* .modal-para{
font-size: 20px;
} */
#modalbtn {
margin: 0 auto;
display: block;
text-align: center;
background: #000;
color: #fff;
/* max-width: 200px; */
padding: 14px;
text-decoration: none;
cursor: pointer;
font-weight: 700;
border-radius: 3px;
outline: none;
border: 2px solid;
font-size: 17px
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 0px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.3);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: 50px auto 50px;
padding: 25px 35px;
/* border: 1px solid #888; */
border-radius: 12px 12px;
box-shadow: var(--shadow);
max-width: 500px;
/* width: 70%; */
}
/* The Close Button */
.close {
/* display: block; */
color: #aaaaaa;
font-size: 25px;
font-weight: bold;
float: right;
/* border: 3px solid; */
border-radius: 50px;
background: #e8e8ed;
padding: 3px 10px;
}
.close:hover,
.close:focus {
color: rgba(0, 0, 0, 0.72);
text-decoration: none;
cursor: pointer;
}
.modal-content-inner {
height: auto;
margin: 40px auto 10px;
max-width: 800px;
}
.modal-title {
margin-bottom: 10px;
}
.modal-ul {
padding: 0;
margin: 0 auto 0;
}
.modal-li {
list-style-type: none;
padding: 0;
}
.modal-li:not(:last-child) {
border-bottom: 1px solid var(--border-color);
}
.modal-li a {
text-decoration: none;
color: var(--ast-global-color-2);
padding: 17px 0;
display: block;
font-weight: 600;
font-size: 17px;
}
.modal-li a:hover {
color: var(--ast-global-color-1);
}
.d-none {
display: none;
}
.tabs {
max-width: 720px;
margin: 0 auto;
}
<!-- Trigger/Open The Modal -->
<button id="modalbtn" onclick="toggleDrop(document.querySelector('#drop'))" class="dropbtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="modal-content-inner">
<h3 class="modal-title">Select Option</h3>
<div id="drop" class="dropdown-content">
<ul class="modal-ul">
<li class="modal-li"><a id="modallink" href="#bird" onclick="openPage('dl-tabOne', this)">Click for Bird</li>
</a>
<li class="modal-li"><a id="modallink" href="#animal" onclick="openPage('dl-tabTwo', this)">Click for Animal
</li>
</a>
</ul>
</div>
</div>
</div>
</div>
<div class="tabs">
<!-- Bird Name -->
<div tab-name="dl-tabOne" class="dl-tabcontent">
Parrot
</div>
<!-- Animal Name -->
<div tab-name="dl-tabTwo" class="dl-tabcontent d-none">
Lion
</div>
</div>
Things are working fine but I want the modal to close automatically when the user clicks an option.
I'm new to JS. Kindly help me with the code that will close the modal when user clicks an option.
Thanks.

Just add this statement modal.style.display = "none"; as part of your openPage function as shown below :
function openPage(id, a) {
const p = document.querySelector("[tab-name='" + id + "']");
const tabs = document.querySelectorAll(".tabs .dl-tabcontent");
for (var x = 0; x < tabs.length; x++)
tabs[x].classList.add("d-none");
if (p !== null) {
document.querySelector(".dropbtn").innerHTML = a.innerHTML;
p.classList.remove("d-none");
}
modal.style.display = "none";
}

Just add this line
modal.style.display = "none";
on openPage() function
function openPage(id, a) {
const p = document.querySelector("[tab-name='" + id + "']");
const tabs = document.querySelectorAll(".tabs .dl-tabcontent");
for (var x = 0; x < tabs.length; x++)
tabs[x].classList.add("d-none");
if (p !== null) {
document.querySelector(".dropbtn").innerHTML = a.innerHTML;
p.classList.remove("d-none");
}
modal.style.display = "none";
}

Js Script not working in NextJs Class Problem

I have an FAQ page on the website I am building right now. I got the faq section from a template. I tried to use Javascript within my NextJs Projekt but it is not working.
var faq = document.getElementsByClassName("faqpage");
var i;
for (i = 0; i < faq.length; i++) {
faq[i].addEventListener("click", function () {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var body = this.nextElementSibling;
if (body.style.display === "block") {
body.style.display = "none";
} else {
body.style.display = "block";
}
});
}
var cpt = document.getElementsByClassName("faqbody");
var i;
for (i = 0; i < faq.length; i++) {
cpt[i].addEventListener("click", function () {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var body = this.nextElementSibling;
if (body.style.display === "block") {
body.style.display = "none";
} else {
body.style.display = "block";
}
});
}
.Faq {
background-color: rgba(46,40,35,255);
padding-top: 50px;
padding-bottom: 150px;
}
.Faq h2 {
color: white;
text-align: center;
font-size: 4vh;
margin-bottom: 20px;
}
.faqcontainer{
display: flex;
justify-content: center;
flex-direction: column;
}
.hrline{
width: 62%;
margin: auto;
margin-top: 20px;
}
.faqpage {
cursor: pointer;
padding: 30px 20px;
width: 60%;
border: none;
font-size: 25px;
font-weight: 600;
outline: none;
transition: 0.4s;
margin: auto;
color: #EC2628;
}
.faqbody{
margin: auto;
/* text-align: center; */
width: 50%;
line-height: 30px;
font-size: 20px;
padding: 0 18px;
display: none;
overflow: hidden;
padding-bottom: 20px;
}
.faqpage:after {
content: '\002B';
/* Unicode character for "plus" sign (+) */
font-size: 35px;
font-weight: 100;
color: white;
float: right;
transition-duration: 0.5s;
}
.active:after {
transform: rotate(45deg);
/* Unicode character for "minus" sign (-) */
font-weight: 100;
}
<div className={styles.Faq}>
<h2>FAQ</h2>
<div className={styles.faqone}>
<h1 className={styles.faqpage}>How can I join the community?</h1>
<div className={styles.faqbody}>
<p>We have a very active community and we welcome new members with open arms! Come and chat with us on Discord.</p>
</div>
</div>
<hr className={styles.hrline}/>
<div className={styles.faqtwo}>
<h1 className={styles.faqpage}>How can I join the community?</h1>
<div className={styles.faqbody}>
<p>We have a very active community and we welcome new members with open arms! Come and chat with us on Discord.</p>
</div>
</div>
<hr className={styles.hrline}/>
<div className={styles.faqthree}>
<h1 className={styles.faqpage}>How can I join the community?</h1>
<div className={styles.faqbody}>
<p>We have a very active community and we welcome new members with open arms! Come and chat with us on Discord.</p>
</div>
</div>
<hr className={styles.hrline}/>
<div className={styles.faqfour}>
<h1 className={styles.faqpage}>How can I join the community?</h1>
<div className={styles.faqbody}>
<p>We have a very active community and we welcome new members with open arms! Come and chat with us on Discord.</p>
</div>
</div>
<hr className={styles.hrline}/>
<Script src="../components/FAQLOC.js"></Script>
</div>
I thought it has something to do with the classes and that javascript cannot grab the classes from nextjs but I also don't know how to solve this problem.
The Snippet is so that you can see all of my CODE!
Can someone help me?

Components on Nextjs are all server-side by default so you don't have access to the document object. Have you tried importing your component dynamically and setting SSR to false? https://nextjs.org/docs/advanced-features/dynamic-import

Javascript Blur background when div is block?

I'm having a problem with bluring the background when my menu is open. I tried writing something on my own but it's not working.
function backgroundBlur() {
var menuBox = document.getElementById("mobile-menu");
var blur = document.getElementById("body");
if (menuBox.style.dsiplay = "block") {
blur.style.filter = "blur(3px)";
}
}

I think the problem can be caused by three reasons:
Typo noted by #RyanWalls
The backgroundBlur() method is not called
The display property of the menuBox is not block
I made a run to simulate this event:
let button = document.getElementById('setBlur');
let control = false;
function backgroundBlur(control) {
var menuBox = document.getElementById("mobile-menu");
var blur = document.getElementById("body");
if (menuBox.style.display === "block")
{
if(!control)
{
blur.style.filter = "blur(3px)";
button.innerHTML = 'Remove Blur';
}
else
{
blur.style.filter = "blur(0px)";
button.innerHTML = 'Add Blur';
}
}
}
button.addEventListener('click', function() {
backgroundBlur(control);
control = !control;
});
*{
margin: 0;
}
#body{
background-color: black;
}
button{
margin-top: 25px;
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
width: 100%;
}
.vertical-menu {
width: 200px;
}
.vertical-menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
}
.vertical-menu a:hover {
background-color: #ccc;
}
.vertical-menu a.active {
background-color: #04AA6D;
color: white;
}
<div id="body">
<div id="mobile-menu" style="display: block;">
<div class="vertical-menu">
Home
Link 1
</div>
</div>
</div>
<button id="setBlur">Add Blur</button>

Can OnClick do 2 things?

This is the html code...
<div id="video-embeds">
<div id="Div1">
<input id="Button1" type="button" value="►" onclick="switchVisible();" style="font-size: 40px; font-weight: bold; line-height: 2; background-color: #000; text-align: center; color: #fff; margin-bottom: 0px; z-index: 102; background: url('.get_post_meta(get_the_ID(), 'fifu_image_url', TRUE).') no-repeat; background-size: cover; position: relative; padding-bottom: 56.25%; padding-top: 0px; height: 0; margin-bottom: 0px; width: 100%; font-size: 120px; line-height: 5;"/>
</div>
<div id="Div2" class="video-embed" style="font-size: 40px; font-weight: bold; line-height: 2; background-color: #000; text-align: center; color: #fff; margin-bottom: 0px; z-index: 102;display:none;">'.
do_shortcode('[video_display]').'
</div>
</div>
This is the script...
<script type="text/javascript">
function switchVisible() {
if (document.getElementById('Div1')) {
if (document.getElementById('Div1').style.display == 'none') {
document.getElementById('Div1').style.display = 'block';
document.getElementById('Div2').style.display = 'none';
}
else {
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'block';
}
}
}
</script>
I want to add url openning in new pop up window or new window also onclick input as
Something like...
https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode( get_permalink( get_the_ID() ) ); ?>
Is it possible?

The best way is to use addEventListener, and just forget about the onclick attribute altogether. Remove the onclick in your <button> code and add this to the script:
document.getElementById("Button1").addEventListener("click", (e) => {
/* write code for stuff button is supposed to do when clicked */
});
This way, you are separating your JavaScript from your HTML, resulting in nicer code. Instead of calling an anonymous function (e) => { ... } or function() { ... }, you can call functions by name, and you can do this repeatedly, if you want multiple functions to run when the button is clicked:
document.getElementById("Button1").addEventListener("click", functionName1);
document.getElementById("Button1").addEventListener("click", functionName2);
/* etc... */
With that code, both functionName1() and functionName2() will run when the button is clicked.
More info: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
And make sure the <script> tag is the last element inside the <body> tag, so that the script does not interrupt the loading of the page.

You can try bootstrap modal
example
OR
window.open('http://google.com');

Different events based on number of clicks

I have been struggling to get something to work:
https://jsfiddle.net/CreativeAU/ys12ed05/
warningbutton.onclick = function buttonClicks() {
count += 1;
if (count > 1) {
window.location.href = "http://www.google.com.au";
}
else {
warningbutton.onclick = function() {warningpopup.style.display = "block";}
}};
What I'm currently trying to do
The first time a user clicks 'Go To Page 2', a warning popup will appear. Once they close the warning and click the button again - it will take them to Page 2.
Right now:
Nothing happens on the first button click.
On the second click, and every button click after = the warning popup appears.
Ideally what I want
When a user arrives to a page (let's call it Page1), I want them to have to have clicked Box 1 OR Box 2 at least once - before clicking the 'Go To Page 2' button. If they haven't - then a 'warning popup' will appear over the screen telling them that they need to. I have very little idea how to code this using other divs.
If anyone is able to help me solve 'Ideally what I want' that would be awesome, but otherwise I will settle for what 'I'm currently trying to do'.
I've set it all up on the JsFiddle page just so you can visualise what I'm after.

this does what you want i think.
the link to google wont work, but this is because of stackoverflow.
var counter = 0;
$(document).ready(function(){
$('#first').click(function(){
counter++
});
$('#second').click(function(){
counter++
});
$('#next-page').click(function(){
if (counter >= 1) {
window.location.href = "http://www.google.com.au";
}else{
$('#warning-popup').css("display", "block");
}
});
$('#warning-popup').click(function(){
$(this).css("display", "none");
});
});
#wrapper {
max-width: 1200px;
margin: 0 auto;
}
#first, #second, #next-page {
text-align: center;
vertical-align: middle;
line-height: 125px;
font-size: 25px;
color: #FFF;
margin: 10px;
}
#first, #second {
display: inline-block;
background-color: #189a3d;
width: 125px;
height: 125px;
}
#next-page {
display: block;
background-color: #2e82d0;
width: 270px;
height: 125px;
}
.overlay {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.75);
text-align: center;
padding-top: 25px;
font-size: 40px;
color: #FFF;
}
#close {
color: orange;
float: right;
font-size: 30px;
text-decoration: underline;
margin-top: -0.35em;
}#wrapper {
max-width: 1200px;
margin: 0 auto;
}
#first, #second, #next-page {
text-align: center;
vertical-align: middle;
line-height: 125px;
font-size: 25px;
color: #FFF;
margin: 10px;
}
#first, #second {
display: inline-block;
background-color: #189a3d;
width: 125px;
height: 125px;
}
#next-page {
display: block;
background-color: #2e82d0;
width: 270px;
height: 125px;
}
.overlay {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.75);
text-align: center;
padding-top: 25px;
font-size: 40px;
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="first">B1</div>
<div id="second">B2</div>
<div id="warning-popup" class="overlay">
WARNING TEXT HERE
</div>
<div id="next-page">Go to Page 2</div>
</div>

The following code should work, showing the alert if clicked the first time, and redirecting to google after another click.
var count = 0;
warningbutton.onclick = function buttonClicks() {
count += 1;
if (count > 1) {
window.location.href = "http://www.google.com.au";
}
else {
warningpopup.style.display = "block";
}
};

You need to change your else code.
You bind a new event on click, but do not trigger a click. You simply need to change the display attribute of your warning pop-up, without binding it on the click event.
A simple fix:
if (count > 1) {
window.location.href = "http://www.google.com.au";
}
else {
warningpopup.style.display = "block";
}};

you are basically registering a new function with the onclick event when the count is not greater than 1. solution should be
warningbutton.onclick = function buttonClicks() {
count += 1;
console.log(count);
if (count > 1) {
window.location.href = "http://www.google.com.au";
}
else {
warningpopup.style.display = "block";
}};