We Keep Coding

How to make Custom CSS select list appear as a modal when the button is clicked?

I have created a custom CSS select and need help to make the #drop in form of a modal.
So that whenever a user clicks on the dropdown button, it will open a modal containing a list of options. And selecting a list will show information on that particular list option.
Also, the #drop div does not appear in the middle of the screen.
I'm new to JS and have managed to create a structure. I'm sharing the code below. Please help me with the modal so that the entire thing works perfectly.
Thanks in advance.
PS: If you think there's some easy way of doing this please add the code to the answer.
<!-- HTML -->
<div class="dropdown">
<button onclick="toggleDrop(document.querySelector('#drop'))" class="dropbtn"></button>
<div id="drop" class="dropdown-content d-none">
<ul>
<li>Click for Bird Name</li>
<li>Click for Animal Name</li>
</ul>
</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>
<!-- CSS -->
.d-none {
display: none;
}
.dropbtn {
display: block;
font-size: 40px;
font-weight: 700;
margin: auto;
width: auto;
outline: none;
border: none;
border-bottom: 2px solid ;
border-bottom-style: dotted;
height: 60px;
cursor: pointer;
overflow: hidden;
color: #150ee6;
background: none;
}
.dropdown {
position: relative;
margin: 30px 30px 10px;
text-align: center;
}
.dropdown-content {
position: absolute;
background-color: #fff;
min-width: 250px;
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1), 0 5px 4px -5px rgba(0, 0, 0, 0.1);
z-index: 1;
text-align: left;
padding: 20px;
}
.dropdown-content ul {
padding: 0;
}
.dropdown-content li {
list-style-type: none;
border-bottom: 1px solid #dfe1e5;
}
.dropdown-content li:last-child{
border: none;
}
.dropdown-content a {
color: #0d0d21;
padding: 15px 10px;
font-size: 1rem;
text-decoration: none;
list-style-type: none;
display: block;
font-weight: 600;
}
.dropdown-content a:hover {
background-color: #f2f2f2;
}
.tabs {
max-width: 720px;
margin: 0 auto;
}
.dl-tab-abt{
margin-top: 25px !important;
}
<!-- JS -->
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;
}

How to make dropdown (dropdown content) to show below each button when clicked

I have been trying to solve this issue for some days now but just giving me a lot of time to crack my brain and yet doesn't get the solution to it.
What I want to solve is that, when I click on each button, I want its dropdown to show just below its own button rather than all the dropdown showing at the left side of the screen and secondly, when it show just below its button, the content should change.
Thanks.
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
let dropdowns = document.getElementsByClassName("dropdown-content");
let i;
for (i = 0; i < dropdowns.length; i++) {
let openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
};
nav {
display: flex;
}
.dropbtn {
font-size: 12px;
border: none;
outline: none;
text-align: center;
color: #f2f2f2;
width: 155px;
padding: 14px 16px;
background-color: inherit;
font-family: serif;
text-transform: capitalize;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 200px;
height: 200px;
overflow: hidden;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 10px;
padding-bottom: 20px;
padding-top: 40px;
opacity: .9;
}
.dropdown-content a {
color: blue;
padding: 12px 20px;
text-decoration: none;
display: block;
width: 100%;
font-size: 12px;
background-color: ;
border-bottom: 1px solid gray;
}
.dropdown a:hover {
background-color: gray;
}
.show {
display: block;
}
<nav>
<div class="dropdown">
<button class="dropbtn" id="active" onclick="myFunction()">new
</button>
<div class="dropdown-content" id="myDropdown">
link 1
link 2
link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">fresh
</button>
<div class="dropdown-content" id="myDropdown">
link 4
link 5
link 6
</div>
</div>
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">naija
</button>
<div class="dropdown-content" id="myDropdown">
link 7
link 8
link 9
</div>
</div>
</nav>

What your code is doing right now is creating three dropdown elements. Then, when a button is clicked, you are executing myFunction(), which gets #myDropdown. An element's id is, quoting the MDN Docs, "unique in a document". However, you have three elements with the same ID. So, when you execute document.getElementById("myDropdown") on line two of your JS code, it will find the first instance of #myDropdown and toggle the show class on that one element.
The provided code has the following changes:
Removed inline events. It is better practice to use addEventListener instead of inline events like onclick in your HTML.
Better let and const usages.
const dropdowns = Array.from(document.getElementsByClassName("dropdown-content"));
const dropdownButtons = Array.from(document.getElementsByClassName('dropbtn'));
let currentDropdown = 0;
let dropdownAmount = 0;
dropdownButtons.forEach(function(dropdownBtn, index) {
dropdownBtn.addEventListener('click', function(e) {
e.stopPropagation();
dropdowns[index].classList.toggle('show');
currentDropdown = index;
dropdownAmount++;
if (dropdownAmount > 1) { // closes other dropdowns if more than one is open
for (let i = 0; i < dropdowns.length; i++) {
const openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show') && i !== currentDropdown) {
openDropdown.classList.remove('show');
}
}
dropdownAmount = 1;
}
});
});
window.addEventListener('click', function(event) {
for (let i = 0; i < dropdowns.length; i++) {
const openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
dropdownAmount = 0;
}
});
nav {
display: flex;
}
.dropbtn {
font-size: 12px;
border: none;
outline: none;
text-align: center;
color: #f2f2f2;
width: 155px;
padding: 14px 16px;
background-color: inherit;
font-family: serif;
text-transform: capitalize;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 200px;
height: 200px;
overflow: hidden;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 10px;
padding-bottom: 20px;
padding-top: 40px;
opacity: .9;
}
.dropdown-content a {
color: blue;
padding: 12px 20px;
text-decoration: none;
display: block;
width: 100%;
font-size: 12px;
background-color: ;
border-bottom: 1px solid gray;
}
.dropdown a:hover {
background-color: gray;
}
.show {
display: block;
}
<nav>
<div class="dropdown">
<button class="dropbtn" id="active">new</button>
<div class="dropdown-content">
link 1
link 2
link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">fresh</button>
<div class="dropdown-content">
link 4
link 5
link 6
</div>
</div>
<div class="dropdown">
<button class="dropbtn"><i>naija</i></button> <!-- demonstration for op's problem -->
<div class="dropdown-content">
link 7
link 8
link 9
</div>
</div>
</nav>
EDIT: Fixed the code so that child elements of the .dropbtns also open the dropdown. The .dropbtn click event was working, but then it also fired the window click event. The window click event checked the event target, which was not a button, so it closed all the dropdowns. Now, if the .dropbtn click event is fired, e.stopPropagation is called which prevents the window click event from firing.

Hover command stops working when hiding nested div

I am trying to use the hover command in CSS and it works when hovering over my property button, but I want it to hide after the click event in JavaScript.
Below is an example of my code with a "property" button and then a dropdown that comes when you hover over it. If I add $(".dropdown-content").css("display","none"); to the button click event then the hover command stops working.
I don't understand why this is the case as I would be hiding a nested div .dropdown-content and so the hover command should still work for the outer div `.dropdown but it doesn't. Any help would be appreciated!
$("#001").on('click', function() {
window.whichtab = 1;
});
$("#002").on('click', function() {
window.whichtab = 2;
});
$("#001,#002").on('click', function() {
$("#title1,#title2").hide()
if (window.whichtab == 1) { //home
$("#title1").show();
$("#title1").css("display", "inline");
//$(".dropdown-content").css("display","none");
}
if (window.whichtab == 2) {
$("#title2").show();
$("#title2").css("display", "inline");
//$(".dropdown-content").css("display","none");
}
});
.dropbtn {
background-color: #3d70b2;
color: white;
padding: 13px;
font-size: 16px;
border: none;
}
.dropdown-content button {
color: black;
border: none;
width: 250px;
height: auto;
padding: 13px 16px;
text-align: left;
text-decoration: none;
display: inline-block;
cursor: pointer;
}
.dropdown-content {
display: none;
border: solid;
border-radius: 0px;
border-color: #3d70b2;
position: absolute;
background-color: 17, 83, 238;
min-width: 250px;
box-shadow: 0px 12px 16px 0px rgba(0, 0, 0, 0);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3d70b2;
}
#title1 {
display: inline;
}
#title2 {
/*defult title is hidden for 2*/
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<!--title of each tab-->
<button class="dropbtn">Property</button>
<h4 id="title1">   Home page</h4>
<h4 id="title2">   Content Page</h4>
<div class="dropdown-content">
<!--each button going to each tab-->
<button id="001" ,class='noHover'>Home Page</button><br>
<button id="002">Content Page</button><br>
</div>
</div>

display: none doesn't preserve the space and you can not hover on that. You can use opacity property like the following way:
$(".dropdown-content").css("opacity", 0); // hide
$(".dropdown-content").css("opacity", 1); // show

Third clickdown menu item won't come down

I started writing a responsive navigation bar (4 menu item) with two clickdowns. Now, I would like to add a third one. But when I add a third one, it won't dropdown. Earlier someone helped me with the second one (which also didn't drop down) and it works. So I thought I'd just copy the JS from the second one but that didn't work. Can someone tell me what I need to do in order for the third one to also dropdown? Thx!
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
/*If you bind 2 onclick then only last one will fire*/
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
removeShow("dropdown-content");
}
if (!event.target.matches('.dropbtn2')) {
removeShow("dropdown-content2");
}
}
function removeShow(className) {
var dropdowns = document.getElementsByClassName(className);
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
function myFunction2() {
document.getElementById("myDropdown2").classList.toggle("show");
}
/* Navigation */
.navbar-0 {
height: auto;
}
.navbar-1 {
text-align: center;
color: #FB4D4D;
padding: 0px;
}
.home,
.contact {
padding: 5px;
}
/* Dropdown Button */
.dropbtn {
text-align: center;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
background-color: white;
color: #FB4D4D;
padding: 0px;
margin: 0px;
border: none;
cursor: pointer;
font-weight: bold;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
margin: 5px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #FB4D4D;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
border: none;
}
/*2e drop*/
/* Dropdown Button */
.dropbtn2 {
font-size: 15px;
font-family: 'Open Sans', sans-serif;
background-color: white;
color: #FB4D4D;
padding: 0px;
margin: 0px;
border: none;
cursor: pointer;
font-weight: bold;
}
/* The container <div> - needed to position the dropdown content */
.dropdown2 {
position: relative;
margin: 5px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content2 {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content2 a {
color: #FB4D4D;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content2 a:hover {
background-color: #f1f1f1
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
border: none;
}
/*3e drop*/
/* Dropdown Button */
.dropbtn3 {
font-size: 15px;
font-family: 'Open Sans', sans-serif;
background-color: white;
color: #FB4D4D;
padding: 0px;
margin: 0px;
border: none;
cursor: pointer;
font-weight: bold;
}
/* The container <div> - needed to position the dropdown content */
.dropdown3 {
position: relative;
margin: 5px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content3 {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content3 a {
color: #FB4D4D;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content3 a:hover {
background-color: #f1f1f1
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
border: none;
}
button:focus {
outline: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-12 navbar-0">
<div class="col-10 col-container col-center-block navbar-1">
<div class="colom col-3 home"><strong>HOME</strong></div>
<div class="colom col-3 dropdown aanbod">
<button onclick="myFunction()" class="dropbtn">ONS AANBOD</button>
<div id="myDropdown" class="dropdown-content col-12">
WebDesign
Retoucheren
</div>
</div>
<div class="colom col-3 dropdown2 portfolio">
<button onclick="myFunction2()" class="dropbtn2">PORTFOLIO</button>
<div id="myDropdown2" class="dropdown-content2 col-12">
Websites
Retoucheringen
</div>
</div>
<div class="colom col-3 dropdown spelers">
<button onclick="myFunction3()" class="dropbtn3">SPELERS</button>
<div id="myDropdown3" class="dropdown-content3 col-12">
A-Kern
B-Kern
</div>
</div>
<div class="colom col-3 contact"><strong>CONTACT</strong></div>
</div>
</div>

You are calling myFunction3 but not defined you have to create myFunction3 in
js.
function myFunction3() {
document.getElementById("myDropdown3").classList.toggle("show");
}
Appreciate if useful.

Your onClick buttons should be ...
<button onclick="myFunction('myDropdown')" class="dropbtn">ONS AANBOD</button>
<button onclick="myFunction('myDropdown2')" class="dropbtn">PORTFOLIO</button>
<button onclick="myFunction('myDropdown3')" class="dropbtn">SPELERS</button>
... and your function myFunction should look like this:
function myFunction(id) {
document.getElementById(id).classList.toggle("show");
}

Opening a popup from a dowpdown menu

I want to be able to open a drop down menu, and when I select one of the options, a small window will popup with more options available. Something shown in this picture I found: http://datasmugglers.com/wp-content/uploads/mute-someone.jpg
I tried some solutions I found but no matter what I do it doesn't seem to work. I can't find any errors but I'm trying to do it exactly like the template someone gave me in my last question and its just not working.
//toggles the hidden dropdown
function dropdown() {
document.getElementById("myDropdown").classList.toggle('show');
}
//opens a popup window from clicking settings
function settings() {
document.getElementById('settingsD').classList.toggle('show');
}
/* dropdown button*/
.dropbtn {
background-color:#4caf50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/*drop down button on hover & focus*/
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/*the container <div> needed to postision the content */
.dropdown {
position: relative;
display: inline-block;
}
/*dropdown content*/
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/*changes the style of the list*/
.dropdown-content2 {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/*links in the dropdown*/
.dropdown-content a:hover {background-color: #f1f1f1}
/*show the dropdown (use Js to add this class to the dropwdown-content container when its clicked)*/
.show {display:block;}
.settings {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: 10000;
max-width: 26em;
height: 199px;
padding: 28px 22px;
border: 4px solid rgb(197, 218, 255);
background: black;
}
<!DOCTYPE html>
<html>
<link type="text/css" rel="stylesheet" href="dropdown.css">
<script src="dropdown.js" type="text/javascript"></script>
<head>
<div class="dropdown">
<button onclick='dropdown()' class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<div class='dropdown-content2' onclick="settings()">Settings</div>
<span id='settingsD' class='settings'>These are the settings</span>
<div class='dropdown-content2'>Link 2</div>
<div class='dropdown-content2'>Link 3</div>
</div>
</div>
</head>
</html>
As you can see I can't click on the settings part of the dropdown and have the settings text show, and I'm not sure why. Thank you for your help in advance!

You have to place the .show below .settings in your css. If you have it like you do the display:block; in .show gets overwritten by the display:none; in .settings which is below.
Else you could do .settings:not(.show) if none of the css for .settings should be displayed.