a beginner here, i'm trying to make a modal that will be shown once the share button is clicked and i don't seem to find why the onclick function isn't executed, the idea is once the share button is clicked the display:none; will be changed to display:block, so either there is a problem with style.display="block" or, which is more probable, i suck .
Any help is appreciated.
Thank you previously.
HTML code:
<div class="navbar-container">
<div class="nav nav-1" >
<button class="btn btn-1" id="sharebtn">Share </button>
</div>
<div class="nav nav-2">
<button class="btn btn-2" id="howbtn">how does it work ?</button>
</div>
<div class="nav nav-3" >
<button class="btn btn-3" id="abouttns">About</button>
</div>
</div>
<!---Creating the modals-->
<div id="modal-share">
<div class="modal-header">
<button class="close-share">×</button>
</div>
<div class="link">
<input type="text" class="link-input" placeholder="www.youtube.com/jdlkfsjakfdsa">
<button id="share-btn" onclick="fuck">share</button>
</div>
<div class="description">
<input type="text" max="50" placeholder="cats are not that smart">
</div>
</div>
CSS code:
#modal-share{
display: none; /*hidden by default*/
position: fixed; /*staying in the center even when scrolling*/
z-index: 1; /*stays on top of grids, 3D translation*/
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: white; /*color of the modal*/
background-color: rgba(0,0,0,0.4); /*color of the background*/
border:1px solid black;
}
Javascript code:
<script>
var modal=document.getElementById("modal-share");
var share_btn=document.getElementsById("sharebtn");
var close_share=document.getElementsByClassName("close-share");
share_btn.onclick=function(){
modal.style.display="block";
}
close_share.onclick=function(){
modal.style.display="none";
}
window.onclick=function(event){
if(event.target==modal){
modal.style.display="none";
}
}
</script>
There is actually an error in your script which is causing everything else to fail, namely
var share_btn=document.getElementsById("sharebtn");
There is no function document.getElementsById, only document.getElementById. I have your code working with the fix on the following link -
https://jsfiddle.net/2pfzc4gL/
There is a typo in your script which is causing the issue.
var share_btn=document.getElementsById("sharebtn");
it should be getElementById instead of getElementsById.
it would be better if we use querySelector for querying DOM element and for events addEventListener instead of overriding the click function
var share_btn = document.querySelector("#sharebtn");
var close_share = document.querySelector(".close-share");
var modal = document.querySelector("#modal-share");
share_btn.addEventListener("click", function () {
modal.style.display = "block";
});
close_share.addEventListener("click", function () {
modal.style.display = "none";
});
window.addEventListener("click", function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
});
Two things, first there's a typo in your code getElementsById should be getElementById. And the second is that getElementsByClassName returns an array like collection of elements so you need to retrieve the first one from the array. Here's the updated javascript.
const modal = document.getElementById("modal-share");
const share_btn = document.getElementById("sharebtn"); // typo here in original
const close_share = document.getElementsByClassName("close-share")[0]; // select first element in HTML collection
share_btn.onclick = function () {
modal.style.display = "block";
}
close_share.onclick = function () {
modal.style.display = "none";
}
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
Related
I have a page on my site which has 3 separate 'hidden' divs. Each with it's own 'show/hide' button.
Currently... each div and button set functions independently.
Therefore... if all divs are shown (open) at the same time, they stack according to their respective order.
Instead of that, I would rather restrict the function a bit, so that only div can be shown (open) at a time.
Example: If Div 1 is shown, and the user then clicks the Div 2 (or Dive 3) button, Div 1 (or which ever div is open at the time, will close.
I am not sure how to adjust my code to make that all work together. I have tried a few ideas, but they were all duds. So I posted a generic 'independent' version below.
function show_Div_1() {
var div1 = document.getElementById("Div_1");
if (div1.style.display === "none") {
div1.style.display = "block";
} else {
div1.style.display = "none";
}
}
function show_Div_2() {
var div2 = document.getElementById("Div_2");
if (div2.style.display === "none") {
div2.style.display = "block";
} else {
div2.style.display = "none";
}
}
function show_Div_3() {
var div3 = document.getElementById("Div_3");
if (div3.style.display === "none") {
div3.style.display = "block";
} else {
div3.style.display = "none";
}
}
.div {
width: 270px;
height: 30px;
padding-left: 10px;
}
<button type="button" onclick="show_Div_1()">Div 1 - Red</button>
<button type="button" onclick="show_Div_2()" style="margin-left: 4px">Div 2 - Blue</button>
<button type="button" onclick="show_Div_3()" style="margin-left: 4px">Div 3 - Green</button>
<div id="Div_1" class="div" style="background-color:red; display: none;"></div>
<div id="Div_2" class="div" style="background-color:blue; display: none;"></div>
<div id="Div_3" class="div" style="background-color:green; display: none;"></div>
I would suggest using data attributes for a toggle. Why? you can use CSS for them and you can use more than just a toggle - multiple "values".
Here in this example I do your "click" but also added a double click on the button for a third value. Try some clicks and double clicks!
A bit of overkill perhaps but more than just "toggle" for example you could use this to show "states" of things like a stoplight or any number of things.
Use the grid display and move them by just adding a data attribute value and double click it to get it to go (using css) to some grid-area:, things like that.
const hideValues = {
hide: "hidden",
show: "showme",
double: "dblclick"
};
function dblClickHander(event) {
const targetSelecor = event.target.dataset.target;
const target = document.querySelector(targetSelecor);
const action = target.dataset.hideme == hideValues.double ? hideValues.hide : hideValues.double;
const toggleTargets = document.querySelectorAll('.toggle-target');
toggleTargets.forEach(el => {
el.dataset.hideme = hideValues.hide;
});
target.dataset.hideme = action;
}
function toggleEventHandler(event) {
const targetSelecor = event.target.dataset.target;
const target = document.querySelector(targetSelecor);
const showHide = target.dataset.hideme == hideValues.hide ? hideValues.show : hideValues.hide;
const toggleTargets = document.querySelectorAll('.toggle-target');
toggleTargets.forEach(el => {
el.dataset.hideme = hideValues.hide;
});
target.dataset.hideme = showHide;
}
/* set up event handlers on the buttons */
const options = {
capture: true
};
/* we do this first to prevent the click from happening */
const toggleButtons = document.querySelectorAll('.toggle-button');
toggleButtons.forEach(el => {
el.addEventListener('dblclick', dblClickHander, options);
});
toggleButtons.forEach(el => {
el.addEventListener('click', toggleEventHandler, options)
});
.toggle-target {
width: 270px;
height: 30px;
padding-left: 10px;
}
.toggle-target[data-hideme="hidden"] {
display: none;
}
.toggle-target[data-hideme="showme"] {
display: block;
}
.toggle-target[data-hideme="dblclick"] {
display: block;
border: solid 2px green;
padding: 1rem;
opacity: 0.50;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
}
.green-block {
background-color: green;
}
<button type="button" class="toggle-button" data-target=".red-block">Div 1 - Red</button>
<button type="button" class="toggle-button" data-target=".blue-block">Div 2 - Blue</button>
<button type="button" class="toggle-button" data-target=".green-block">Div 3 - Green</button>
<div class="toggle-target red-block" data-hideme="hidden">red</div>
<div class="toggle-target blue-block" data-hideme="hidden">blue</div>
<div class="toggle-target green-block" data-hideme="hidden">green</div>
This can be done in many ways. I think the best approach in your case could be
BUTTONS
<button type="button" onclick="show_div('Div_1')">Div 1 - Red</button>
<button type="button" onclick="show_div('Div_2')" style="margin-left: 4px">Div 2 - Blue</button>
<button type="button" onclick="show_div('Div_3')" style="margin-left: 4px">Div 3 - Green</button>
SCRIPT
function show_div(div_id) {
var thisDiv = document.querySelector('#'+div_id);
var thisState = thisDiv.style.display;
// close all in any cases
document.querySelectorAll('.div').forEach(function(el) {
el.style.display = "none";
});
// open this div only if it was closed
if (thisState == "none" ){
thisDiv.style.display = "block";
}
}
PS - I am a non tech person but can create basic websites for small personal projects.
I was working on a simple website where I needed to add a modal form using HTML/JS (Code below) and when I run it, it does not load the modal form on first click but works fine on the second click onwards. Tried researching but couldnt find anything or couldnt understand a lot of stuff.
(The above code was derived from a form tutorial on W3schools)
EDIT - I am using the (fid) variable as I need to call this same function multiple times on the page, hence not using "mybtn" directly in document.getElementById(fid)
< script >
function myfunc(fid) {
var modal = document.getElementById("myModal");
var btn = document.getElementById(fid);
var span = document.getElementsByClassName("close")[0];
btn.onclick = function () {
modal.style.display = "block";
};
span.onclick = function () {
modal.style.display = "none";
};
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
};
}
< /script>
<a id="myBtn" class="btn" onclick="myfunc('myBtn')">Enquire Now</a>
You should be able to just set the event listeners programmatically
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function () {
modal.style.display = "block";
};
span.onclick = function () {
modal.style.display = "none";
};
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
};
</script>
And then remove the onclick from the button element.
<a id="myBtn" class="btn">Enquire Now</a>
You can accomplish the desired effect with a single delegated event handler that responds to click events on some designated ancestor element... here it is the document itself. The click will trigger an event that can be processed in the callback function to determine ( thanks to event bubbling/propagation ) which element triggered the callback and thus you can run whatever code you need within the suitably partitioned pieces of code.
document.addEventListener('click',e=>{
let dialog=document.querySelector('#myModal');
let span=dialog.querySelector('span.close');
if( e.target.id=='myBtn' ){
dialog.style.display='block'
}
if(e.target.className=='close' ){
dialog.style.display='none'
}
});
.close{
width:3rem;
height:3rem;
background:red;
display:inline-block;
text-align:center;
line-height:3rem;
}
.close:before{
content:'X';
color:white;
font-size:3rem;
cursor:pointer
}
#myModal{
display:none;
width:300px;
height:300px;
border-radius:1rem;
border:3px solid black;
margin:auto;
padding:1rem;
float:none;
}
.btn{
display:block;
width:120px;
text-align:center;
padding:1rem;
background:whitesmoke;
border:1px solid grey;
border-radius:0.5rem;
margin:1rem;
cursor:pointer;
}
<a id="myBtn" class="btn">Enquire Now</a>
<div id='myModal'>
<span class='close'></span>
</div>
I'm very new to using Javascript and i'm struggling how I can achieve what I am after. I've created 4 buttons using;
<input type="button" name="answer" value="Brave" onclick="showDiv()">
My goal is that if you click on the button, it changes state and the div appears (got that far). If I click another button, i'd like the content to hide the previous div selected and show the one they had just clicked.
Any help/guidance would really be appreciated.
function showDiv() {
document.getElementById('BraveDiv').style.display = "block";
}
function showDiv1() {
document.getElementById('DeterminedDiv').style.display = "block";
}
function showDiv2() {
document.getElementById('CompassionateDiv').style.display = "block";
}
function showDiv3() {
document.getElementById('ConsiderateDiv').style.display = "block";
}
My aim is that if you was to click
function showDiv()
{
document.getElementById('new1').style.display = "block";
document.getElementById('Div1').style.display = "none";
document.getElementById('Div2').style.display = "none";
}
function showDiv1()
{
document.getElementById('Div1').style.display = "block";
document.getElementById('new1').style.display = "none";
document.getElementById('Div2').style.display = "none";
}
function showDiv2()
{
document.getElementById('Div2').style.display = "block";
document.getElementById('new1').style.display = "none";
document.getElementById('Div1').style.display = "none";
}
Your code attached won't achieve any of the results you're looking for, however, it's obvious what you're looking for.
You buttons should look like the following :
<button role="button" onclick="showDiv('BraveDiv')">Brave</button>
Here, the role prevents the default behaviour of submit. The onclick tells the button what to do when you click it, and the "BraveDiv" is the parameter we will pass to the function, telling it which div to display.
The DIV associated with the above button, should look as follows :
<div id="BraveDiv" style="display: none;"> SOME CONTENT HERE </div>
Here you'll notice the ID is equal to the parameter we mentioned above.
And your JavaScript should work as follows :
<script>
function showDiv(elem){
document.getElementById(elem).style.display = "block";
}
</script>
I've attached a working snipped example as below, just click "Run code snippet" to view the snippet and test the code.
function showDiv(elem) {
document.getElementById(elem).style.display = "block";
}
<button role="button" onclick="showDiv('BraveDiv')">Brave</button>
<button role="button" onclick="showDiv('CompassionateDiv')">Compassionate</button>
<div id="BraveDiv" style="display: none;"> SOME BRAVE CONTENT HERE </div>
<div id="CompassionateDiv" style="display: none;"> SOME COMPASSIONATE CONTENT HERE </div>
The above, however, will only SHOW YOUR DIVS.
The full jQuery solution to this (hide/show as per the tag) would be :
<script>
function showDiv(elem) { // When the button is pressed
$("div").each(function() { // For each Div
if ($(this).attr('id') != elem) { // If the Div's id is not equal to the parameter
$(this).css("display", "none");
} // HIDE IT
else {
$(this).css("display", "block"); // SHow It
});
</script>
If you are unfamiliar with jQuery and would prefer a JavaScript only solution, then :
<script>
function showDiv(elem){
var divsToCheck = ["BraveDiv", "CompassionateDiv"]; // Add to here to check more divs
for(let i = 0; i < divsToCheck.length; i++){
if(divsToCheck[i] == elem){
document.getElementById(divsToCheck[i]).style.display = "block";
}
else{
document.getElementById(divsToCheck[i]).style.display = "none";
}
}
</script>
Again I've attached a snippet below.
function showDiv(elem) {
var divsToCheck = ["BraveDiv", "CompassionateDiv"]; // Add to here to check more divs
for (var i = 0; i < divsToCheck.length; i++) {
if (divsToCheck[i] == elem) {
document.getElementById(divsToCheck[i]).style.display = "block";
} else {
document.getElementById(divsToCheck[i]).style.display = "none";
}
}
}
<button role="button" onclick="showDiv('BraveDiv')">Brave</button>
<button role="button" onclick="showDiv('CompassionateDiv')">Compassionate</button>
<div id="BraveDiv" style="display: none;"> SOME BRAVE CONTENT HERE </div>
<div id="CompassionateDiv" style="display: none;"> SOME COMPASSIONATE CONTENT HERE </div>
function showDiv() {
document.getElementById('BraveDiv').style.display = "block";
document.getElementById('DeterminedDiv').style.display = "none";
document.getElementById('CompassionateDiv').style.display = "none";
document.getElementById('ConsiderateDiv').style.display = "none";
}
function showDiv1() {
document.getElementById('BraveDiv').style.display = "none";
document.getElementById('DeterminedDiv').style.display = "block";
document.getElementById('CompassionateDiv').style.display = "none";
document.getElementById('ConsiderateDiv').style.display = "none";
}
function showDiv2() {
document.getElementById('BraveDiv').style.display = "none";
document.getElementById('DeterminedDiv').style.display = "none";
document.getElementById('CompassionateDiv').style.display = "block";
document.getElementById('ConsiderateDiv').style.display = "none";
}
function showDiv3() {
document.getElementById('BraveDiv').style.display = "none";
document.getElementById('DeterminedDiv').style.display = "none";
document.getElementById('CompassionateDiv').style.display = "none";
document.getElementById('ConsiderateDiv').style.display = "block";
}
This might not be the sleekest way of doing it, but will get you the results you want. As each button is pressed, all others will close.
You just need to set the display style of the remaining <div>s back to none. The simplest way to do this is to first set all of them to none, then the one you want visible to block:
Note: I’ve used a function which takes the id of the target <div> as a parameter to reduce the amount of code written, but you could easily copy-paste out to separate functions if you require.
function showDiv(divName) {
// First hide all the divs
document.getElementById('BraveDiv').style.display = 'none';
document.getElementById('DeterminedDiv').style.display = 'none';
document.getElementById('CompassionateDiv').style.display = 'none';
document.getElementById('ConsiderateDiv').style.display = 'none';
// Then show the div corresponding to the button clicked
document.getElementById(divName).style.display = 'block';
}
<input type="button" value="Brave" onclick="showDiv('BraveDiv')">
<input type="button" value="Determined" onclick="showDiv('DeterminedDiv')">
<input type="button" value="Compassionate" onclick="showDiv('CompassionateDiv')">
<input type="button" value="Considerate" onclick="showDiv('ConsiderateDiv')">
<div id="BraveDiv" style="display: none">BraveDiv</div>
<div id="DeterminedDiv" style="display: none">DeterminedDiv</div>
<div id="CompassionateDiv" style="display: none">CompassionateDiv</div>
<div id="ConsiderateDiv" style="display: none">ConsiderateDiv</div>
There are alternative ways of doing this which require less code, such as this method using a little CSS and document.querySelectorAll():
function showDiv(divName) {
// First remove the selected class from all divs in output-divs
document.querySelectorAll('#output-divs > .selected').forEach(element => {
element.classList.remove('selected');
});
// Then add it to the div corresponding to the button clicked
document.getElementById(divName).classList.add('selected');
}
.output-div:not(.selected) {
display: none;
}
<input type="button" value="Brave" onclick="showDiv('brave')">
<input type="button" value="Determined" onclick="showDiv('determined')">
<input type="button" value="Compassionate" onclick="showDiv('compassionate')">
<input type="button" value="Considerate" onclick="showDiv('considerate')">
<div id="output-divs">
<div class="output-div selected" id="brave">Brave</div>
<div class="output-div" id="determined">Determined</div>
<div class="output-div" id="compassionate">Compassionate</div>
<div class="output-div" id="considerate">Considerate</div>
</div>
$(document).ready(function() {
$("#btn1").click(function(){
showDiv('div1');
});
$("#btn2").click(function(){
showDiv('div2');
});
$("#btn3").click(function(){
showDiv('div3');
});
$("#btn4").click(function(){
showDiv('div4');
});
});
function showDiv(_divId){
$(".div-class").each(function() {
if(!$(this).hasClass('div-hide'))
$(this).addClass('div-hide');
});
$('#' + _divId).removeClass('div-hide');
}
.div-class {
min-height: 50px;
border: 1px solid #eee;
margin: 10px;
padding: 10px;
width: 100%;
}
.div-hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<button id="btn3">Button 3</button>
<button id="btn4">Button 4</button>
<div id="div1" class='div-class div-hide'><h3>Div1 Content </h3></div>
<div id="div2" class='div-class div-hide'><h3>Div2 Content </h3></div>
<div id="div3" class='div-class div-hide'><h3>Div3 Content </h3></div>
<div id="div4" class='div-class div-hide'><h3>Div4 Content </h3></div>
I know the question of closing a pop-up by clicking outside of it has been asked before. I have a somewhat complex pop-up and the solution offered by Phillip Walton isn't working for me.
His code simply made my page blurry but stopped the popup from appearing.
$(document).on('click', function(event) {
if (!$(event.target).closest('.maincontainer').length) {
popup.classList.remove('popup--open');
popup.style.display = 'none';
popupAccessory.style.display = 'none';
popupAccessory.classList.remove('popup--accessory--open');
maincontainer.classList.remove('blurfilter');
}
});
I also tried:
window.addEventListener('click', function(event) {
if (event.target != popup) {
popup.classList.remove('popup--open');
popup.style.display = 'none';
popupAccessory.style.display = 'none';
popupAccessory.classList.remove('popup--accessory--open');
maincontainer.classList.remove('blurfilter');
}
}, true);
This closes the popup when I click anywhere, including on the popup itself. I want it to close only when I click on part of the screen that isn't the popup.
The code to open the popup:
function openpopup() {
popup.style.display = 'initial';
setTimeout(function(){
popup.classList.add('popup--open');
popup.style.boxShadow = '0 0 45px 2px white';
maincontainer.classList.add('blurfilter')}, 10);
for (let i = 0; i < listitems.length; i++ ) {
setTimeout(function() {
listitems[i].classList.add('visible');
}, 100);
}
}
I added the event listener to a button
popupOpenbtn.addEventListener('click', openpopup);
The HTML structure:-
<div class="maincontainer>
...all my page content...
</div>
<div class="popup">
...popup contents...
</div
I would suggest using only css classes to style your popup and use JS only to add, remove and toggle that class. Not sure how close to your working exercise is this fiddle but I've prepared this to show how the document/window click event can be checked to successfully open/close the popup window.
var popupOverlay = document.querySelector('#popup__overlay');
var popupOpenButton = document.querySelector('#popupOpenButton');
var popupCloseButton = document.querySelector('#popupCloseButton');
var mainContainer = document.querySelector('main');
function closestById(el, id) {
while (el.id != id) {
el = el.parentNode;
if (!el) {
return null;
}
}
return el;
}
popupOpenButton.addEventListener('click', function(event) {
popupOverlay.classList.toggle('isVisible');
});
popupCloseButton.addEventListener('click', function(event) {
popupOverlay.classList.toggle('isVisible');
});
mainContainer.addEventListener('click', function(event) {
if (popupOverlay.classList.contains('isVisible') && !closestById(event.target, 'popup__overlay') && event.target !== popupOpenButton) {
popupOverlay.classList.toggle('isVisible');
}
});
#popup__overlay {
display: none;
background-color: rgba(180, 180, 180, 0.5);
position: absolute;
top: 100px;
bottom: 100px;
left: 100px;
right: 100px;
z-index: 9999;
text-align: center;
}
#popup__overlay.isVisible {
display: block;
}
main {
height: 100vh;
}
<aside id="popup__overlay">
<div class="popup">
<h2>Popup title</h2>
<p>
Lorem ipsum
</p>
<button id="popupCloseButton">Close popup</button>
</div>
</aside>
<main>
<div class="buttonWrapper">
<button id="popupOpenButton">Open popup</button>
</div>
</main>
So implementing a few various modals in my web page. My code is as follows.
HTML
<div id="modal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h3>Title</h3>
</div>
</div>
JavaScript
<script>
var modal = document.getElementById('modal');
var btn = document.getElementById("mybtn");
var span = document.getElementsByClassName("closeSel")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
all very simple, my issue occurs when i try to add another modal, i change the id value, and add another script for the different modal, which works fine, but when it comes to actually closing the modal it wont work...
For the close button CSS im using the same class, is this what is causing the issue?
/* The close Button */
.close {
color: #aaaaaa;
float: right;
font-style: arial;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
I doubt it would be the classes, I would think more along the IDs as they need to be unique, do you also change the button ID?
If the click and close functionality does not take any parameters, you could just use inline onclick html, then you would be more certain it is not IDs getting messed up.
In the code you are also referencing a class "closeSel" which I do not see in the HTML
You are close, but you need to iterate through each span element. I have attached a working example.
<!-- Test Modal -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>First Test text in modal..</p>
</div>
</div>
<!-- Test Modal 2 -->
<div id="myModal2" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Second test text in modal..</p>
</div>
</div>
<script>
var span = document.getElementsByClassName("close");
var modal;
var btn = document.getElementsByClassName("button is-primary is-small modal-button");
for (var i = 0; i < btn.length; i++) {
var thisBtn = btn[i];
thisBtn.addEventListener("click", function(){
modal = document.getElementById(this.dataset.modal);
modal.style.display = "block";
}, false);
}
// iterate through each span element for each modal
for (var i = 0; i < span.length; i++){
span[i].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";
}
}
</script>