I have a photo that using hyperlink, and there have a onclick function.
When I click the text, it will pop out a div.
Now, I want to directly show the photo on the poped out div instead of go to a another website to see the photo, what should I do? Do I need to change the CSS setting of the pop out div "myModal"?
here is my HTML code
<div class="navbar">
<a
onclick="myFunction()"
href="https://live.staticflickr.com/65535/52677035304_b82948dc84_h.jpg"
>Photo1</a
>
</div>
js code
function myFunction() {
var x = document.getElementById("myModal");
if (x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
modal in HTML
<div style="text-align: center" id="myModal" class="modal">
<!--Modal content-->
<div class="modal-content">
<span onclick="myFunction()" id="cross" class="close">×</span>
<p>some text</p>
</div>
</div>
What I want:
Pass the event object to myFunction so that preventDefault() can be called to prevent navigating away from the current page. Note, however, that is recommended to use addEventListener instead of inline event handlers.
Add an <img> element inside the modal and change its src when displaying the image.
<div class="navbar">
<a onclick="myFunction(event)" href="https://live.staticflickr.com/65535/52677035304_b82948dc84_h.jpg">Photo1</a>
</div>
<div style="text-align: center; display: none;" id="myModal" class="modal">
<div class="modal-content">
<span onclick="myFunction()" id="cross" class="close">×</span>
<img/>
</div>
</div>
<script>
function myFunction(e) {
e.preventDefault();
const x = document.getElementById("myModal");
x.querySelector('img').src = e.target.href;
if (x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
Related
I am trying to make multiple modals that show different stuff when opened but, only the first modal will close and the second modal won't close when I press the span button. when console logged it only shows the first modals spans id it won't show the second spans id. is their ant DRY way of fixing this.
HTML
<!--Work-->
<div id="work">
<h2>Work</h2>
<ul>
<li>
<button class="nobs-modal-btn"><img src="./assets/images/favicon.oe.ico" alt="No Ordinary Burritos website" width="200px" height="200px"></button>
<p>No ordinary burritos</p>
</li>
<li>
<button class="run-buddy-modal-btn"><img src="./assets/images/hero-bg.jpg" alt="" width="200px" height="200px"></button>
<p>Run buddy</p>
</li>
</ul>
</div>
<!-- end Work -->
<!-- nobs Modal -->
<div id="nobs-modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<!-- run buddy Modal -->
<div id="run-buddy-modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<img src="./assets/images/hero-bg.jpg" alt="">
</div>
</div>
js
// Get the modal
var nobsModal = document.querySelector("#nobs-modal");
const runBuddyModal = document.querySelector("#run-buddy-modal")
// Get the button that opens the modal
var nobsBtn = document.querySelector(".nobs-modal-btn");
const runBuddyBtn = document.querySelector(".run-buddy-modal-btn");
// Get the <span> element that closes the modal
var span = document.querySelector("span");
// display modal
nobsBtn.addEventListener('click', () => {
nobsModal.style.display = "block"
})
runBuddyBtn.addEventListener('click', () => {
runBuddyModal.style.display = 'block'
})
span.addEventListener('click', () => {
nobsModal.style.display = "none"
runBuddyModal.style.display = 'none'
})
// When the user clicks anywhere outside of the modal, close it
window.addEventListener('click', function(event) {
if (event.target == runBuddyModal) {
runBuddyModal.style.display = "none";
}
})
window.addEventListener("click", function(event) {
if (event.target == nobsModal) {
nobsModal.style.display = "none";
}
console.log(event)
})
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>