The code should open a modal window after a click on the button but the first time you want to open it, it requires two clicks on the button to open it.
I encoutered this problem after copying some code from W3Schools and modifying it so it fits inside my JS file.
HTML
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn" onclick="modalFunction()">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
Javasript
function modalFunction() {
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// 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";
}
}
}
If you move your event load handlers outside the function it will work as expected.
Here I simply removed the function and the inline script handler.
I also change the onlick to the newer addEventListener, and here's a good answer explaining their differences: addEventListener vs onclick
Note that the script needs to be runned at page load, not before
// Make sure DOM is loaded before access any of its elements
window.addEventListener('load', function() {
// Get the modal
var mdl = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var spn = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.addEventListener('click', function(ev) {
mdl.style.display = "block";
// Prevent event bubbling (so in this case the window listener
// won't catch the event and simply close it immediately)
ev.stopPropagation();
});
// When the user clicks on <span> (x), close the modal
spn.addEventListener('click', function() {
mdl.style.display = "none";
});
// When the user clicks anywhere outside of the modal, close it
window.addEventListener('click', function(ev) {
if (!mdl.contains(ev.target)) {
mdl.style.display = "none";
}
});
});
.modal {
position: relative;
display: none;
border: 1px solid black;
}
.close {
position: absolute;
display: block;
color: white;
background: red;
padding: 3px 5px;
right: 0;
top: 0;
}
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close"> X </span>
<p>Some text in the Modal..</p>
</div>
</div>
Related
Good day,
I have three buttons - let's call them myBtn1, myBtn2 and myBtn3 - doing basically the same operation (i.e. opening a div in modal mode).
I am a little bit stuck to know "who" (i.e. which button) called my javascript. Is there an easy way to know that or do I need to duplicate my javascript part ?
Sorry if the question may sound silly.
Thanks a lot for your help.
Cheers
My html code :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/test.css" />
</head>
<body>
<!-- Trigger/Open The Modal -->
<button id="myBtn1">Open Modal</button>
<button id="myBtn2">Open Modal</button>
<button id="myBtn3">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal... </p>
<p>Called by [myBtn1 or myBtn2 or myBtn3] </p>
</div>
<script type="text/javascript" src="./scripts/modal.js"></script>
</div>
</body>
</html>
My javascript (modal.js) :
/*
modal.js
*/
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on 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";
}
}
The event listener is passed an event object. It's target property is the element on which the event was fired.
document.querySelectorAll("button").forEach(function (e) {
e.addEventListener("click", function (event) {
console.log(event.target)
});
});
<div>
<button id="button1">Button 1</button>
<button id="button2">Button 2</button>
<button id="button3">Button 3</button>
</div>
You can use event.target in your event handler to determine the object that dispatched the event. This way you can easily attach one handler to the parent to process events on all of its children.
document.getElementById("div").onclick = function(e){
console.log(e.target);
}
<div id="div">
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<button id="btn3">Button 3</button>
</div>
<button id="myBtn1" onclick="btnclick(this)">Open Modal</button>
<button id="myBtn2" onclick="btnclick(this)">Open Modal</button>
<button id="myBtn3" onclick="btnclick(this)">Open Modal</button>
And in your javascript function you can see:
function btnclick(ref){
var id = $(ref).attr('id');
}
Since you have included the js using the script tag in your HTML file, all the js functionalities and events will be available.
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
there is a mistake in your code, you should provide a valid id.
var btn = document.getElementById("myBtn1"); // this will work
now myBtn1 will initiate the onclick call
// in your modal.js
document.querySelectorAll("button").forEach(function (e) {
e.addEventListener("click", function (event) {
console.log(event.target)
});
});
I'm facing an issue , where the javascript is responsible to create the button then show it on HTML( Pop up box ).
Once it's created, i want the user to freely click a button to close it.
The workaround is by setting the modal.style.style=display
.
In the HTML:
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class='modal-header'>
<span class='close'>×</span>
<div id ="sub" >
</div>
</div>
I have a function to create a modal box upon getting success variable, i'm appending to the id sub.
div.innerHTML =
"<div id=''><span class='close'><input type='image' id='vicious' onclick='clear()' style='width:100%;' border='0' src='images/DUK.png' ></span></div>"
When it shows on HTML, i want to trigger an onclick function to close this modal box.
Because everything is created by the javascript, so I think the issue it's not triggering any line.
I've tried creating an onclick function to trigger
var modal = document.getElementById('myModal');
function clear(){
modal.style.display = "none";
}
I've also tried
var modal = document.getElementById('myModal');
var vicious = document.getElementById("vicious");
vicious.onclick = function() {
modal.style.display = "none";
}
I'm out of idea, could someone guide me?
Thanks in advance.
JSBIN: http://jsbin.com/rusapudodo/edit?html,js,output
As you are using jQuery, you can achieve hiding of modal as per below steps,
Remove binding of click event, onclick='clear()'. This is not needed.
Bind listener to the element with id as vicious using,
$('#vicious').click(function() {
$('#myModal').modal('hide');
});
Alternatively try the following approach,
$("#vicious").on("click", function(e){
$("#modal").modal("hide");
e.stopPropagation();
});
Stop the event from bubbling up.
If you want to use vanilla javaScript onlt then include the following code after you set the inner html,
var btn = document.getElementById("vicious");
btn.onclick = function() {
alert();
modal.style.display = "none";
}
You can try something like that :
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class='modal-header'>
<span class='close' onclick="close()">×</span>
<div id="sub">
</div>
</div>
</div>
</div>
<script>
function close(){
document.getElementById('myModal').style.display = 'none';
}
</script>
You need to move the selector inside the function:
function clear() {
var modal = document.getElementById('myModal');
modal.style.display = "none";
}
EDIT: using your second technic:
div.innerHTML = ...;
var vicious = document.getElementById("vicious");
vicious.onclick = clear;
For disabling button, you can use the below code
$("#button0000000001").find("button").attr("disabled", true);
I am trying to customize a modal login form.
How can I apply data-dojo-attach-point id to document.getElementById('id'); as below in order to grab the button id?
HTML
<div style="text-align:center;">
<button data-dojo-type="dijit/form/Button"
data-dojo-attach-event="onClick:toggleEditing"
data-dojo-props="label:'${i18n.labels.startEditing}','class':'success'"
data-dojo-attach-point="toggleBTN">
</button>
</div>
Javascript
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
I am at the beginning to learn Javascript. And I hope you can help me.
I want to use a fancybox if someone clicked on a link with a class attribute. I have done it also with an id. With id attributes the code works very fine. But if I cange it with class attributes it doesn´t work.... :(
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// 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";
}
}
</script>
This code works very fine. But why don´t work this one with only class attributes? The code have also the same element as the upper one. Only the following lines of codes have been changed.
<button class="myBtnNew">Open Modal New</button>
var myBtnNew = document.getElementsByClassName("myBtnNew");
myBtnNew.onclick = function() {
modal.style.display = "block";
}
Thank you for your help...
getElementsBy as it says, resturns multiple elements, a list. So myBtnNew is a list of elements and the list does not have an onclick. So just add the [0] as you did with span :
var myBtnNew = document.getElementsByClassName("myBtnNew")[0];
document.getElementsByClassName returns an array of objects, not just one object. Use this:
var myBtns = document.getElementsByClassName("myBtnNew");
myBtns[0].onclick = function() {
modal.style.display = "block";
}
I duplicate my modal button and The problem is I can't show "Open Modal 2" in my code.
<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
Here is my complete code:
https://jsfiddle.net/dedi_wibisono17/xn3npwc4/
What should I do? Thank You
You should use different ID for your "Open Modal 2" elements.
According to definition and usage from W3School,
the getElementById() method accesses the first element with the specified id.
In my humble opinion you ignored what id means
Two button's ids are same which captions are Open Modal and Open Modal2
So btn variable is connected with only first element which id is myBtn
var btn = document.getElementById("myBtn");
Thanks
Try this. Hope it helps :)
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<button id="myBtn2">Open Modal 2</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
var btn2 = document.getElementById("myBtn2");
// 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";
}
btn2.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";
}
}
You have same id for yours button "Open Modal" and "Open Modal 2". When you write var btn = document.getElementById("myBtn"); then you got first of two of yours button. And any events you bind only for this first button. So you need to change id of second button for something like 'myBtn1' and use something like this piece of code to set event handlers:
function setModal(btn,modal) {
btn.onclick=function() {
modal.style.display="block";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
var span=modal.querySelectorAll(".close") [0];
span.onclick = function() {
modal.style.display = "none";
}
};
setModal(document.getElementById("myBtn"),document.getElementById('myModal'));
setModal(document.getElementById("myBtn1"),document.getElementById('myModal'));
I've modified your fiddle here: https://jsfiddle.net/1fgmfpfc/
Your HTML id conflict in Javascript ,it's a major issue of your code. document.getElementById always bind your upper HTML code like as when u change your modal2 code upper above than modal1 then modal2 open but not open in modal1, so define different HTML id or try to dynamic name of HTML id.