I have a basic problem with showing modal. Everything is working ok, but only for second click. I am sure, I have some mistake in js code. Can you help me please?
HTML code:
<div class="flex flex-col lg:flex-row justify-center px-3 lg:px-0">
<div class="pb-3 lg:pb-0 lg:p-5 cursor-pointer">
<img onclick="showImage('planek1')" id="planek1" src="assets/imgs/planek1.jpg" alt="">
</div>
<div class="cursor-pointer lg:p-5">
<img onclick="showImage('planek2')" id="planek2" src="assets/imgs/planek2.jpg" alt="">
</div>
</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
Javascript code:
function showImage(id) {
const modal = document.getElementById("myModal");
const img = document.getElementById(id);
const modalImg = document.getElementById("img01");
img.onclick = function () {
modal.style.display = "block";
modalImg.src = this.src;
};
const span = document.getElementsByClassName("close")[0];
span.onclick = function () {
modal.style.display = "none";
};
}
Try removing onclick="showImage('planek2')", give a class="triggers-modal" to your elements, and write this JavaScript:
const modalImg = document.getElementById("img01");
const span = document.getElementsByClassName("close")[0];
span.onclick = function () {
modal.style.display = "none";
};
Array.from(document.getElementsByClassName('triggers-modal')).forEach(element => {
element.onclick = function () {
modal.style.display = "block";
modalImg.src = this.src;
};
});
This code defines the modal behavior for every element that has the triggers-modal class name instead of the onclick event which is inappropriate.
Related
I'm trying to make a button that opens a image on my webpage and then when you press the x in the corner it closes. I got the image to open, but the close button isn't working and I don't know why.
var modal = document.getElementById("myModal");
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
img.onclick = function() {
modal.style.display = "block";
modalImg.src = "image link";
}
function close(i) {
document.getElementById(i).style.display = "none";
}
<div class="sidebar">
<div class="schedule">
<button id="myImg">
<h4><span class="fa fa-caret-right"></span> Schedule</h4>
<div id="myModal" class="modal">
<span class="close" style="z-index: 999;" onclick="close('myModal')">×</span>
<img class="modal-content" id="img01" />
</div>
</button>
</div>
</div>
You have a button inside a modal which is inside a button. That is a problem since the outer button prevents the inner button from working. Lets break those out a bit, and use a relative reference to close the modal.
First separate the modal from the button.
var modal = document.getElementById("myModal");
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
img.onclick = function() {
modal.style.display = "block";
modalImg.src = "https://picsum.photos/200/300";
}
function closeModal(el) {
el.closest('.modal').style.display = "none";
}
#myModal {
display: none;
}
.close {
display: inline-block;
padding: 5px;
cursor: pointer;
}
<div id="myModal" class="modal">
<span class="close" style="z-index: 999;" onclick="closeModal(this)">×</span>
<img class="modal-content" id="img01" />
</div>
<div class="sidebar">
<div class="schedule">
<button id="myImg">
<h4><span class="fa fa-caret-right"></span> Schedule</h4></button>
</div>
</div>
Using relative references like that are handy when you have more than one element that can call them. Additionally it frees you from having to call an ID.
I have this model in my page which is working fine but when i close it the url still has its name like #modalname.
Here is my code:
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("adm");
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>
Here is html code:
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<center>
<label style="font-size: 25px; color:#2193b0;"><i class="fas fa-lock"></i>Enter Admin Password to access Admin Section</label>
<br><br>
<input type="password" id="password" name="" class="input-text" autocomplete="off" style="width:500px;height: 50px;">
<br>
<button class="button" name="check"><span>GO</span></button>
<br></center>
</div>
</div>
Here is how i access the modal:
<li id="adm"><i class="fas fa-lock"></i>Admin</li>
This is how my url looks after i close it:
http://localhost/project/index.php#myModal
I wonder why you have to use <a href="#myModal> to open modal, just replace it by button:
<li id="adm"><i class="fas fa-lock"></i><button>Admin</button></li>
If you dont want to use button because it's default style, you can try with <span> tag:
<li id="adm"><i class="fas fa-lock"></i><span style="cursor:pointer">Admin</span></li>
For <a> tag:
<li id="adm"><i class="fas fa-lock"></i><a role="button">Admin</a></li>
Would be nice to have a separate functions to open and close the modal,
function openModal() {
modal.style.display = "block";
}
function closeModal() {
modal.style.display = "none";
}
So your code with all of the above combined should be smth like this:
// This removes hash
function removeHash() {
history.pushState('', document.title, window.location.pathname + window.location.search);
}
function openModal() {
modal.style.display = 'block';
}
function closeModal() {
modal.style.display = 'none';
removeHash();
}
var modal = document.getElementById('myModal');
var btn = document.getElementById('adm');
var span = document.getElementsByClassName('close')[0];
btn.onclick = openModal;
span.onclick = closeModal;
window.onclick = function(event) {
if (event.target == modal) {
closeModal();
}
}
Add to the close button
im doing a trello copy
im using a modal to insert adjacent html
after adding that i wanna refresh the javascript src so that it can detect the div this is the code
<div id="ColCreate" class="fab tooltip"><span class="tooltiptext">Add Column</span>+</div>
<div id="CreateCol" class="ColCreate">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Create an column</h2>
</div>
<div class="modal-body">
<label for="cname">Column Name</label>
<input id="cnamei" type="text" name="cnamei"><br>
<button onclick="finish()" class="Finish">Finish</button>
</div>
<div class="modal-footer">
<h3></h3>
</div>
</div>
</div>
<div id="container" class="container">
</div>
<script src="./index.js"></script>
<script src="./modal.js"></script>
<script src="./Drag.js"></script>
this is the javascript
var modal = document.getElementById("CreateCol");
var btn = document.getElementById("ColCreate");
var span = document.getElementsByClassName("close")[0];
var finish = document.getElementsByClassName("Finish")[0];
var list1 = "<div><h3>"
var list2 = "</h3><ul id=\"list-1\" class=\"sortable\"><li id=\"fake\" class=\"hidden\"></li><li id=\"item-1\">Link 01</li><li id=\"item-2\">Link 02</li><li id=\"item-3\">Link 03</li><li id=\"item-4\">Link 04</li><li id=\"item-5\">Link 05</li><li id=\"item-6\">Link 06</li></ul></div>"
btn.onclick = function() {
modal.style.display = "block";
}
var finish = function() {
var x = document.getElementById("cnamei").value;
var y = document.getElementById("container");
modal.style.display = "none";
var list = `${list1}${x}${list2}`
y.insertAdjacentHTML( 'beforeend', list);
}
span.onclick = function() {
modal.style.display = "none";
}
modal.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
i wanna refresh the javascript so that dragging works
I'm trying to use multiple model boxes by changing the class and id name of the model and its scripts but for some reason, instead opening respective model boxes for respective links, all id links are opening the one model box which is at the bottom of all.
So far my code:
Text
<a href="#" id="myBtntrain" > Train </a>
<div id="myModal" class="modalhospital">
<div class="modal-contenthospital">
<span class="closehospital"></span>
<p style="padding:20px;text-align:center;"><strong>Is this Service for Self Or Someone Else ?</strong></p>
<hr>
<p style="padding:20px;text-align:center;"><a href="" class="modelonhover" >
<strong style="float:left; padding-left:100px;color:#007AFF;">Self</strong></a><strong style="float:right;padding-right:30px;color:#007AFF;">Someone Else</strong></p>
<br>
</div>
</div>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("closehospital")[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>
<div id="myModaltrain" class="modaltrain">
<div class="modal-contenttrain">
<span class="closetrain"></span>
<p style="padding:20px;text-align:center;"><strong>Is this train for Self Or Someone Else ?</strong></p>
<hr>
<p style="padding:20px;text-align:center;"><a href="" class="modelonhover" >
<strong style="float:left; padding-left:100px;color:#007AFF;">Self</strong></a><strong style="float:right;padding-right:30px;color:#007AFF;">Someone Else</strong></p>
<br>
</div>
</div>
<script>
var modal = document.getElementById("myModaltrain");
var btn = document.getElementById("myBtntrain");
var span = document.getElementsByClassName("closetrain")[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>
I'm pretty new to this, just learning using w3 schools and other resources.
It seems like i just have to name variables with individual names instead of same..
Text
<a href="#" id="myBtntrain" > Train </a>
<div id="myModal" class="modalhospital">
<div class="modal-contenthospital">
<span class="closehospital"></span>
<p style="padding:20px;text-align:center;"><strong>Is this Service for Self Or Someone Else ?</strong></p>
<hr>
<p style="padding:20px;text-align:center;"><a href="" class="modelonhover" >
<strong style="float:left; padding-left:100px;color:#007AFF;">Self</strong></a><strong style="float:right;padding-right:30px;color:#007AFF;">Someone Else</strong></p>
<br>
</div>
</div>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("closehospital")[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>
<div id="myModaltrain" class="modaltrain">
<div class="modal-contenttrain">
<span class="closetrain"></span>
<p style="padding:20px;text-align:center;"><strong>Is this train for Self Or Someone Else ?</strong></p>
<hr>
<p style="padding:20px;text-align:center;"><a href="" class="modelonhover" >
<strong style="float:left; padding-left:100px;color:#007AFF;">Self</strong></a><strong style="float:right;padding-right:30px;color:#007AFF;">Someone Else</strong></p>
<br>
</div>
</div>
<script>
var modaltrain = document.getElementById("myModaltrain");
var btntrain = document.getElementById("myBtntrain");
var spantrain = document.getElementsByClassName("closetrain")[0];
btntrain.onclick = function() {
modaltrain.style.display = "block";
}
spantrain.onclick = function() {
modaltrain.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modaltrain) {
modaltrain.style.display = "none";
}
}
</script>
This solved my problem.. Anyways, thanks for your time guys..
I know similar questions have been asked before but I'm new to Javascript and none of the answers could help me solve my problem.
What I'm trying to do:
four buttons that open modals
but like the title already says, is there no reaction until the buttons have been clicked twice.
Here's my html:
<a id="myBtn" class="btn" href="javascript:void();" onclick="termsFct(this)">View full terms</a>
<div id="myModal" class="modal">
<div class="modal-content">
<span id="x" class="close">×</span>
<h1 class="contract">sample heading</h1>
<h2 class="contract">sample heading</h2>
<p class="fullContract">sample text</p>
</div>
</div>
</td>
<a id="myBtn2" class="btn" href="javascript:void();" onclick="termsFct(this)">View full terms</a>
<div id="myModal2" class="modal">
<div class="modal-content">
<span id="x2" class="close">×</span>
<h1 class="contract">sample heading</h1>
<h2 class="sample heading</h2>
<p class="fullContract">sample text</p>
</div>
</div>
</td>
<a id="myBtn3" class="btn" href="javascript:void();" onclick="termsFct(this)">View full terms</a>
<div id="myModal3" class="modal">
<div class="modal-content">
<span id="x3" class="close">×</span>
<h1 class="contract">sample heading</h1>
<h2 class="contract">sample heading</h2>
<p class="fullContract">sample text</p>
</div>
</div>
</td>
<a id="myBtn4" class="btn" href="javascript:void();" onclick="termsFct(this)">View full terms</a>
<div id="myModal4" class="modal">
<div class="modal-content">
<span id="x4" class="close">×</span>
<h1 class="contract">sample heading</h1>
<h2 class="contract">sample heading</h2>
<p class="fullContract">sample text</p>
</div>
</div>
</td>
and here's the Javascript:
/*------------------------modal------------------------*/
function termsFct(buttonElement) {
var modal = document.getElementById('myModal');
var modal2 = document.getElementById('myModal2');
var modal3 = document.getElementById('myModal3');
var modal4 = document.getElementById('myModal4');
var btn = document.getElementById("myBtn");
var btn2 = document.getElementById("myBtn2");
var btn3 = document.getElementById("myBtn3");
var btn4 = document.getElementById("myBtn4");
var span = document.getElementById("x");
var span2 = document.getElementById("x2");
var span3 = document.getElementById("x3");
var span4 = document.getElementById("x4");
/*------------------------contract visibility------------------------*/
btn.onclick = function() {
modal.style.display = "block";
}
btn2.onclick = function() {
modal2.style.display = "block";
}
btn3.onclick = function() {
modal3.style.display = "block";
}
btn4.onclick = function() {
modal4.style.display = "block";
}
/*------------------------close if x was clicked------------------------*/
span.onclick = function() {
modal.style.display = "none";
}
span2.onclick = function() {
modal2.style.display = "none";
}
span3.onclick = function() {
modal3.style.display = "none";
}
span4.onclick = function() {
modal4.style.display = "none";
}
/*------------------------close if clicked outside------------------------*/
window.onclick = function(event) {
if (event.target == modal) {
modal.scrollTop = 0;
modal.style.display = "none";
}
else if (event.target == modal2) {
modal2.scrollTop = 0;
modal2.style.display = "none";
}
else if (event.target == modal3) {
modal3.scrollTop = 0;
modal3.style.display = "none";
}
else if (event.target == modal4) {
modal4.scrollTop = 0;
modal4.style.display = "none";
}
}
}
I would really appreciate it if someone could help me solve this problem and even better help me shorten the Javascript.
thanks in advance
Ken
The termsFct method is already fired when the button is clicked. so no need of an onclick inside this method.
Replace the btn.onclick section with the below code and add more cases.
Switch(buttonelement.id){
Case btn1:
Modal.style.display="block";
Break;
}