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
Related
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
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.
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 updated the JS to show everything. The one answer below doesn't seem to work with all my code.
I am using this 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 = document.getElementById('myBtn');
modal = document.getElementById('myModal');
btn.onclick = function() {
modal.style.display = "block";
(function(){
var countdown = 5;
setInterval(function() {
countdown--;
if (countdown >= 0) {
span = document.getElementById("countdown");
span.innerHTML = countdown;
}
// Display 'counter' wherever you want to display it.
if (countdown === 0) {
// alert('this is where it happens');
window.location.href= 'https://smb.cyberpolicy.com';
clearInterval(countdown);
}
}, 1000);
})();
}
// 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";
}
}
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div id="boxes">
<div class="modal-content">
<div id="dialog" class="window">
<span class="close">×</span>
<p style="top-modal-text">In <span id="countdown">5</span> seconds you'll be leaving Hiscox to continue a quote with a trusted partner.</p>
<img alt="Cyber Security Get A Quote" src="https://www.hiscox.com/sites/default/files/images/wysiwyg/getaquote.jpg" style="margin-top: 10px" class="align-left"><br>
<a src="https://www.hiscox.com"><p>Click here to return to Hiscox.com</p></a>
</div>
</div>
<!-- <div id="mask"></div> -->
</div></div>
</div>
I think there is something wrong with the JS but I am obviously missing it.
Intro
You had a three errors I fixed.
The first 2 were that you never assigned your variables for modal and button. You need to do this using document.geteElementById.
One more error was never hiding the modal in the first place.
online fiddle: https://jsfiddle.net/euo4byj2/31/
Specific Fixes
You were missing variable assignments:
btn = document.getElementById('myBtn');
modal = document.getElementById('myModal');
You were also missing style code to hide the modal in the first place:
<div id="myModal" class="modal" style="display:none">
Working Code
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal" style="display:none">
<!-- Modal content -->
<div id="boxes">
<div class="modal-content">
<div id="dialog" class="window">
<span class="close">×</span>
<p style="top-modal-text">In <span id="countdown">5</span> seconds you'll be leaving Hiscox to continue a quote with a trusted partner.</p>
<img alt="Cyber Security Get A Quote" src="https://www.hiscox.com/sites/default/files/images/wysiwyg/getaquote.jpg" style="margin-top: 10px" class="align-left"><br>
<a src="https://www.hiscox.com"><p>Click here to return to Hiscox.com</p></a>
</div>
</div>
<!-- <div id="mask"></div> -->
</div></div>
</div>
<script>
btn = document.getElementById('myBtn');
modal = document.getElementById('myModal');
btn.onclick = function() {
modal.style.display = "block";
(function(){
var countdown = 5;
setInterval(function() {
countdown--;
if (countdown >= 0) {
span = document.getElementById("countdown");
span.innerHTML = countdown;
}
// Display 'counter' wherever you want to display it.
if (countdown === 0) {
// alert('this is where it happens');
window.location.href= 'https://smb.cyberpolicy.com';
clearInterval(countdown);
}
}, 1000);
})();
}
</script>
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;
}