Modal works wrong
0
Dears,
When I run this code in wordpress it is not working as should.
Thing is that I want to by clicking on each pictures is caused modal showing with text about a person on this picture.
This should looks like - three pictures in three columns, click and you can read about person on the picture.
Besides, when I scroll down or up the page, modal is going behind other pics...
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById('myModals');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// 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 anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 70%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}<div id="myModals"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
<div id="myModals"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
<div id="myModals"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
<div id="myModals"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p><h3>MY BRIGHTEST DIAMOND</h3>
LOREM IPSUM</p>
</div>
</div>javascript html css wordpress
asked Nov 23 '18 at 12:01
Iza AdamskaIza Adamska
32
add a comment |
0
Dears,
When I run this code in wordpress it is not working as should.
Thing is that I want to by clicking on each pictures is caused modal showing with text about a person on this picture.
This should looks like - three pictures in three columns, click and you can read about person on the picture.
Besides, when I scroll down or up the page, modal is going behind other pics...
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById('myModals');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// 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 anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 70%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}<div id="myModals"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
<div id="myModals"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
<div id="myModals"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
<div id="myModals"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p><h3>MY BRIGHTEST DIAMOND</h3>
LOREM IPSUM</p>
</div>
</div>javascript html css wordpress
asked Nov 23 '18 at 12:01
Iza AdamskaIza Adamska
32
I edited the post now, sorry...
– Iza Adamska
Nov 23 '18 at 12:05
One suggestion -- use to detect outside click { event.target !== modal }
– Diljohn5741
Nov 23 '18 at 12:20
@Diljohn5741 That would close the modal also on a click on some element inside the modal. You'd need something like(!modal.contains(e.target))...
– Teemu
Nov 23 '18 at 12:53
Do you want to have one modal for each picture or just one modal for all and change its content with JavaScript? There are pics overlapping your modal... do they have a higherz-index? how are they positioned (absolute, fixed, ...)? Check this answer.
– David
Nov 23 '18 at 15:02
Regarding having the pictures in different columns, are you using any front-end framework like Bootstrap? If not, read this article.
– David
Nov 23 '18 at 15:08
add a comment |
0
0
0
Dears,
When I run this code in wordpress it is not working as should.
Thing is that I want to by clicking on each pictures is caused modal showing with text about a person on this picture.
This should looks like - three pictures in three columns, click and you can read about person on the picture.
Besides, when I scroll down or up the page, modal is going behind other pics...
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById('myModals');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// 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 anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 70%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}<div id="myModals"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
<div id="myModals"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
<div id="myModals"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
<div id="myModals"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p><h3>MY BRIGHTEST DIAMOND</h3>
LOREM IPSUM</p>
</div>
</div>javascript html css wordpress
asked Nov 23 '18 at 12:01
Iza AdamskaIza Adamska
32
Dears,
When I run this code in wordpress it is not working as should.
Thing is that I want to by clicking on each pictures is caused modal showing with text about a person on this picture.
This should looks like - three pictures in three columns, click and you can read about person on the picture.
Besides, when I scroll down or up the page, modal is going behind other pics...
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById('myModals');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// 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 anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 70%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}<div id="myModals"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
<div id="myModals"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
<div id="myModals"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
<div id="myModals"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p><h3>MY BRIGHTEST DIAMOND</h3>
LOREM IPSUM</p>
</div>
</div>// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById('myModals');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// 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 anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 70%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}<div id="myModals"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
<div id="myModals"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
<div id="myModals"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
<div id="myModals"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p><h3>MY BRIGHTEST DIAMOND</h3>
LOREM IPSUM</p>
</div>
</div>// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById('myModals');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// 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 anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 70%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}<div id="myModals"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
<div id="myModals"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
<div id="myModals"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
<div id="myModals"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p><h3>MY BRIGHTEST DIAMOND</h3>
LOREM IPSUM</p>
</div>
</div>javascript html css wordpress
javascript html css wordpress
asked Nov 23 '18 at 12:01
Iza AdamskaIza Adamska
32
asked Nov 23 '18 at 12:01
Iza AdamskaIza Adamska
32
edited Nov 23 '18 at 12:03
Iza Adamska
asked Nov 23 '18 at 12:01
Iza AdamskaIza Adamska
32
asked Nov 23 '18 at 12:01
Iza AdamskaIza Adamska
32
asked Nov 23 '18 at 12:01
Iza AdamskaIza Adamska
32
32
I edited the post now, sorry...
– Iza Adamska
Nov 23 '18 at 12:05
One suggestion -- use to detect outside click { event.target !== modal }
– Diljohn5741
Nov 23 '18 at 12:20
@Diljohn5741 That would close the modal also on a click on some element inside the modal. You'd need something like(!modal.contains(e.target))...
– Teemu
Nov 23 '18 at 12:53
Do you want to have one modal for each picture or just one modal for all and change its content with JavaScript? There are pics overlapping your modal... do they have a higherz-index? how are they positioned (absolute, fixed, ...)? Check this answer.
– David
Nov 23 '18 at 15:02
Regarding having the pictures in different columns, are you using any front-end framework like Bootstrap? If not, read this article.
– David
Nov 23 '18 at 15:08
add a comment |
I edited the post now, sorry...
– Iza Adamska
Nov 23 '18 at 12:05
One suggestion -- use to detect outside click { event.target !== modal }
– Diljohn5741
Nov 23 '18 at 12:20
@Diljohn5741 That would close the modal also on a click on some element inside the modal. You'd need something like(!modal.contains(e.target))...
– Teemu
Nov 23 '18 at 12:53
Do you want to have one modal for each picture or just one modal for all and change its content with JavaScript? There are pics overlapping your modal... do they have a higherz-index? how are they positioned (absolute, fixed, ...)? Check this answer.
– David
Nov 23 '18 at 15:02
Regarding having the pictures in different columns, are you using any front-end framework like Bootstrap? If not, read this article.
– David
Nov 23 '18 at 15:08
I edited the post now, sorry...
– Iza Adamska
Nov 23 '18 at 12:05
I edited the post now, sorry...
– Iza Adamska
Nov 23 '18 at 12:05
One suggestion -- use to detect outside click { event.target !== modal }
– Diljohn5741
Nov 23 '18 at 12:20
One suggestion -- use to detect outside click { event.target !== modal }
– Diljohn5741
Nov 23 '18 at 12:20
@Diljohn5741 That would close the modal also on a click on some element inside the modal. You'd need something like
(!modal.contains(e.target)) ...– Teemu
Nov 23 '18 at 12:53
@Diljohn5741 That would close the modal also on a click on some element inside the modal. You'd need something like
(!modal.contains(e.target)) ...– Teemu
Nov 23 '18 at 12:53
Do you want to have one modal for each picture or just one modal for all and change its content with JavaScript? There are pics overlapping your modal... do they have a higher
z-index? how are they positioned (absolute, fixed, ...)? Check this answer.– David
Nov 23 '18 at 15:02
Do you want to have one modal for each picture or just one modal for all and change its content with JavaScript? There are pics overlapping your modal... do they have a higher
z-index? how are they positioned (absolute, fixed, ...)? Check this answer.– David
Nov 23 '18 at 15:02
Regarding having the pictures in different columns, are you using any front-end framework like Bootstrap? If not, read this article.
– David
Nov 23 '18 at 15:08
Regarding having the pictures in different columns, are you using any front-end framework like Bootstrap? If not, read this article.
– David
Nov 23 '18 at 15:08
add a comment |
1 Answer
1
active
oldest
votes
-1
you are used id selectors
and id is always unique in HTML dom, we don't use like duplication.
you need to change selector as a class and implement onclick function on that.
like
<div class="img-div"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
var btn = document.getElementByClass('img-div');
btn.onclick = function() {
modal.style.display = "block";
}
answered Nov 23 '18 at 12:24
Hiren GhodasaraHiren Ghodasara
1024
2
document.getElementByClass is not a method, use document.querySelector instead or some other available method
– Diljohn5741
Nov 23 '18 at 12:28
document.getElementByClass is a method and worked for javascript and HTML dom. w3schools.com/jsref/met_document_getelementsbyclassname.asp
– Hiren Ghodasara
Nov 23 '18 at 12:31
My mistake, i should have said use correct syntax. ==> document.getElementsByClassName
– Diljohn5741
Nov 23 '18 at 12:34
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53446361%2fmodal-works-wrong%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
-1
you are used id selectors
and id is always unique in HTML dom, we don't use like duplication.
you need to change selector as a class and implement onclick function on that.
like
<div class="img-div"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
var btn = document.getElementByClass('img-div');
btn.onclick = function() {
modal.style.display = "block";
}
answered Nov 23 '18 at 12:24
Hiren GhodasaraHiren Ghodasara
1024
2
document.getElementByClass is not a method, use document.querySelector instead or some other available method
– Diljohn5741
Nov 23 '18 at 12:28
document.getElementByClass is a method and worked for javascript and HTML dom. w3schools.com/jsref/met_document_getelementsbyclassname.asp
– Hiren Ghodasara
Nov 23 '18 at 12:31
My mistake, i should have said use correct syntax. ==> document.getElementsByClassName
– Diljohn5741
Nov 23 '18 at 12:34
add a comment |
-1
you are used id selectors
and id is always unique in HTML dom, we don't use like duplication.
you need to change selector as a class and implement onclick function on that.
like
<div class="img-div"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
var btn = document.getElementByClass('img-div');
btn.onclick = function() {
modal.style.display = "block";
}
answered Nov 23 '18 at 12:24
Hiren GhodasaraHiren Ghodasara
1024
2
document.getElementByClass is not a method, use document.querySelector instead or some other available method
– Diljohn5741
Nov 23 '18 at 12:28
document.getElementByClass is a method and worked for javascript and HTML dom. w3schools.com/jsref/met_document_getelementsbyclassname.asp
– Hiren Ghodasara
Nov 23 '18 at 12:31
My mistake, i should have said use correct syntax. ==> document.getElementsByClassName
– Diljohn5741
Nov 23 '18 at 12:34
add a comment |
-1
-1
-1
you are used id selectors
and id is always unique in HTML dom, we don't use like duplication.
you need to change selector as a class and implement onclick function on that.
like
<div class="img-div"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
var btn = document.getElementByClass('img-div');
btn.onclick = function() {
modal.style.display = "block";
}
answered Nov 23 '18 at 12:24
Hiren GhodasaraHiren Ghodasara
1024
you are used id selectors
and id is always unique in HTML dom, we don't use like duplication.
you need to change selector as a class and implement onclick function on that.
like
<div class="img-div"><img class="scale-with-grid" src="http://halfway.devil.org.pl/wp-content/uploads/2018/11/MY-BRIGHTEST-DIAMOND-artist.jpg" alt="" /></div>
var btn = document.getElementByClass('img-div');
btn.onclick = function() {
modal.style.display = "block";
}
answered Nov 23 '18 at 12:24
Hiren GhodasaraHiren Ghodasara
1024
answered Nov 23 '18 at 12:24
Hiren GhodasaraHiren Ghodasara
1024
answered Nov 23 '18 at 12:24
Hiren GhodasaraHiren Ghodasara
1024
answered Nov 23 '18 at 12:24
Hiren GhodasaraHiren Ghodasara
1024
1024
2
document.getElementByClass is not a method, use document.querySelector instead or some other available method
– Diljohn5741
Nov 23 '18 at 12:28
document.getElementByClass is a method and worked for javascript and HTML dom. w3schools.com/jsref/met_document_getelementsbyclassname.asp
– Hiren Ghodasara
Nov 23 '18 at 12:31
My mistake, i should have said use correct syntax. ==> document.getElementsByClassName
– Diljohn5741
Nov 23 '18 at 12:34
add a comment |
2
document.getElementByClass is not a method, use document.querySelector instead or some other available method
– Diljohn5741
Nov 23 '18 at 12:28
document.getElementByClass is a method and worked for javascript and HTML dom. w3schools.com/jsref/met_document_getelementsbyclassname.asp
– Hiren Ghodasara
Nov 23 '18 at 12:31
My mistake, i should have said use correct syntax. ==> document.getElementsByClassName
– Diljohn5741
Nov 23 '18 at 12:34
2
2
document.getElementByClass is not a method, use document.querySelector instead or some other available method
– Diljohn5741
Nov 23 '18 at 12:28
document.getElementByClass is not a method, use document.querySelector instead or some other available method
– Diljohn5741
Nov 23 '18 at 12:28
document.getElementByClass is a method and worked for javascript and HTML dom. w3schools.com/jsref/met_document_getelementsbyclassname.asp
– Hiren Ghodasara
Nov 23 '18 at 12:31
document.getElementByClass is a method and worked for javascript and HTML dom. w3schools.com/jsref/met_document_getelementsbyclassname.asp
– Hiren Ghodasara
Nov 23 '18 at 12:31
My mistake, i should have said use correct syntax. ==> document.getElementsByClassName
– Diljohn5741
Nov 23 '18 at 12:34
My mistake, i should have said use correct syntax. ==> document.getElementsByClassName
– Diljohn5741
Nov 23 '18 at 12:34
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53446361%2fmodal-works-wrong%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I edited the post now, sorry...
– Iza Adamska
Nov 23 '18 at 12:05
One suggestion -- use to detect outside click { event.target !== modal }
– Diljohn5741
Nov 23 '18 at 12:20
@Diljohn5741 That would close the modal also on a click on some element inside the modal. You'd need something like
(!modal.contains(e.target))...– Teemu
Nov 23 '18 at 12:53
Do you want to have one modal for each picture or just one modal for all and change its content with JavaScript? There are pics overlapping your modal... do they have a higher
z-index? how are they positioned (absolute, fixed, ...)? Check this answer.– David
Nov 23 '18 at 15:02
Regarding having the pictures in different columns, are you using any front-end framework like Bootstrap? If not, read this article.
– David
Nov 23 '18 at 15:08