How do I use an anchor tag instead of a button to trigger the modal? I can't use Bootstrap because I need to modify the size of the modal. I tried putting the ID in the href but that didn't help. Any suggestions?
// 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";
}
}
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
If you simply change the existing <button> tag to <a> then your existing JS code should work. The principle is exactly the same, to get a reference to the element by ID and then attach a click handler.
But to get the anchor to display as a link it needs an href, so I've used href="#", and then updated the click function to cancel the default click behaviour.
You probably also want some CSS to hide the modal initially.
// 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(e) {
e.preventDefault(); // ADDED this line
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";
}
}
#myModal { display: none; } /* added this CSS */
<!-- Trigger/Open The Modal -->
<a id="myBtn" href="#">Open Modal</a> <!-- changed tags, added href, kept id -->
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
Related
I've been using the following code in Sharepoint and the buttons work just fine, however, when the modal appears it will only stay open for about 5 seconds and then it closes automatically. However, when I use this code outside of Sharepoint, all works as expected. I'm not sure if there is a specific piece that I am missing for Sharepoint.
<div class="icons">
<div class="icon-boxes">
<div class="icon-boxes-Asset">
<div class="zoom2">
<button class="btn-Asset" id="myBtn-Asset">
<img class="image-icon" src="Asset.jpg" alt=""><p>Asset</p>
</button>
</div>
</div>
</div>
</div>
<!-- This is the MODAL section, this popup section for each icon -->
<!-- This is the Asset Forfeiture MODAL section -->
<div class="Asset-Modal">
<div id="myModal-Asset" class="modal-Asset">
<!-- Modal Design -->
<div class="modal-content-Asset">
<div class="Asset-content">
<img class="image-icon" src="Asset.jpg" alt="">
<div class="Heading-Asset">
<div class="Heading-Asset-Name" alt="">
<h2>Asset Page</h2></div>
<div class="Heading-Asset-Address" alt="">
<h3>Washington State</h3></div>
</div>
<span class="close-Asset">×</span>
</div>
<div class="line"></div>
<div class="Asset-content-info">
<body>Lorem</body>
<br>
<br>
<body>Lorem.</body>
<p>Contact: (A) SOS Phillip (360) 333-3333</p>
<p>Asset Page</p>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal-Asset");
// Get the button that opens the modal
var btn = document.getElementById("myBtn-Asset");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close-Asset")[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>
</div>
<!----------------------------------------->
Ok a bit more explanation for the title, i have a modal that was from a template I bought that only really showed how to open it with a button, but I want the modal to show upon page load.
The problem is it doesn't open upon page load using this code:
<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>
var modal = document.getElementById('myModal');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName('close')[0];
// When the user clicks on the button, open the modal
$(window).on('load',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>
please try this onload page
<script type="text/javascript">
$(window).on('load',function(){
$('#myModal').modal('show');
});
</script>
use this html if...
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
hope above code will help you and below link will also helpful
Launch Bootstrap Modal on page load
thanks
Similar questions like this has been posted before but none solved my issue. I'm trying to get enrollments.php page to show as a modal popup within index.php page
index.php
<button class="sess_btn sess_btn1" id="btn_enrol">Enrollments</button>
<div id="enrolModal"></div>
<script>
$(document).ready(function() {
//button modal
$('#btn_enrol').click(function(){
//using ajax post
$.post('enrollments.php',function() {
$('#enrolModal').html(); //Fill DIV enrolModal with enrollments.php content
})
//Calling Modal
$('#myModal').modal('show');
})
})
//-------------
</script>
enrollments.php
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
Also, when I try to click on the button several times there are quick blinks on the browser window. Any help will be appreciated, thanks.
Did the corrections in code to use the jquery API correctly. Not tested but, below code will work.
<script>
$(document).ready(function() {
//button modal
$('#btn_enrol').click(function(){
$.post( "enrollments.php", function( htmlContents ) {
$('#enrolModal').html( htmlContents );
//Show the Modal once you get enrollments.php html contents
$('#myModal').modal('show');
});
})
})
//-------------
</script>
Thanks for the answer, I got it done a little differently. Instead of a button I used a link as shown.
index.html
<script>
$(document).ready(function() {
$('.li-modal').on('click', function(e){
e.preventDefault();
$('#theModal').modal('show').find('.modal-content').load($(this).attr('href'));
})
});
</script>
Enrollments
<div class="modal fade text-center" id="theModal">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
enrollments.php
<script>
// Get the modal
var modal = document.getElementById('theModal');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
window.location.href = "updatesession.php";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
window.location.href = "updatesession.php";
}
}
</script>
<div id="model-content">
<div class="modal-header">
<span id="close" class="close">×</span>
<p>Session Editor</p>
</div>
<div class="modal-body">
<p>Select Session: </p>
</div>
<div class="modal-footer">
<p>Modal Footer</p>
</div>
</div>
Hello I want a pop up modal to appear once a user clicks on a div, i've got a script that works but it will only work on the first div rather than all of them. I've linked the code below. Where do you think i'm going wrong?
<!-- Trigger/Open The Modal -->
<div class="job-wrap">
<button id="myBtn">
<div class="job-box">
<div class="text-box">
<p class="position-type">Part Time</p>
<p class="job-role">Graphic Designer</p>
<p class="company-name">Deans School Supply</p>
</div>
<div class="time-box">
<p>9 Days ago</p>
</div>
</div>
</button>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p class="job-type">Full Time</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 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";
}
}
</script>
First of all, id attribute should be unique on the page, don't multiply it! (and i'm assuming thats what you are doing, since you want multiple buttons to open modal). Secondly, you are matching only the first found id with the document.getElementById function. You should use the class attribute and the document.getElementsByClassName function instead.
<!-- Trigger/Open The Modal -->
<div class="job-wrap">
<button class="myBtn">
<div class="job-box">
<div class="text-box">
<p class="position-type">Part Time</p>
<p class="job-role">Graphic Designer</p>
<p class="company-name">Deans School Supply</p>
</div>
<div class="time-box">
<p>9 Days ago</p>
</div>
</div>
</button>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p class="job-type">Full Time</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btns = document.etElementsByClassName("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
for(var i = 0; i < btns.length; i++) {
btns[i].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>
body html code:
note: that id is to differentiate the button click
foreach($threads as $t) { ?>
<button id="myBtn<?php echo $ids;?>" Open Modal</button>
<? } ?>
This is the modal code how can apply fetch data in here modal?:
<!-- The Modal -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p></p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
This is the Javascript:
<script type="text/javascript">
// Get the modal
var modal = document.getElementById('myModal1');
// Get the button that opens the modal
var btn = document.getElementById("myBtn1");
// 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 == modal1) {
modal.style.display = "none";
}
}
</script>
How can I manage modal in different value, if I'm fetching data from the database?