Develop Reference

Enable scroll in Modal Popup Javascript

I am using a Modal view to display image in popup view, but there is no scroll feature and I want to add it, can anyone help with code?
Script:
<script>
// Get the modal
var modal3 = document.getElementById('myModal3');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img3 = $('.myImg3');
var modalImg3 = $("#img03");
var captionText3 = document.getElementById("caption3");
$('.myImg3').click(function(){
modal3.style.display = "block";
var newSrc3 = this.src;
modalImg3.attr('src', newSrc3);
captionText3.innerHTML = this.alt;
});
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("clos")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal3.style.display = "none";
}
</script>
HTML:
<img style="height:100px;" class="myImg3" src='<?php echo "uploads/" . $patient_pre['img_url']; ?>'>
<!-- The Modal -->
<div id="myModal3" class="modal">
<!-- The Close Button -->
<span class="clos" onclick="document.getElementById('myModal3').style.display='none'">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img03">
<!-- Modal Caption (Image Text) -->
<div id="caption3"></div>
</div>
Thanks in advance.

Try to add overflow-y: auto; to the modal's body:
<div id="myModal3" class="modal" style="overflow-y: auto;">

How do I loop through the images using class trigger

How do I loop through all the images using the call trigger, when I click on the image a modal popup should show my text and image.
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
}
<div portfolio-item ">
<a class="trigger "><img src="images/techify.jpg "/></a>
<div class="modal ">
<div class="modal-content ">
<img class="modalimages " src ="Images/techify.jpg ">
<div class="modal-text ">
<p> It is all about a training institute</p>
</div>
</div>
</div>
</div>
<div class="modal-content ">
<img class="modalimages " src ="Images/HairStyling.jpg ">
</div>
</div>

Going by what you've supplied there are a few minor issues that would even prevent this from running, so I had to make some small changes to the code before I could even begin. One being the } placed at the end of your script.
Another being the <div portfolio-item"> only having one ".
This may or may not be what you're trying to accomplish, but we'd need more information in order to know.
<style>
.modal { display: block; }
.show-modal { display: none; }
</style>
<div portfolio-item>
<a class="trigger">
<img src="images/techify.jpg"/>
</a>
<div class="modal">
<div class="modal-content">
<img class="modalimages" src="Images/techify.jpg">
<div class="modal-text">
<p> It is all about a training institute</p>
</div>
</div>
</div>
<div class="modal-content">
<img class="modalimages" src="Images/HairStyling.jpg">
</div>
</div>
<button class="close-button">Close Button</button>
<script>
var modal = document.querySelectorAll(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
for(i=0;i<modal.length;i++){
modal[i].classList.toggle("show-modal");
}
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
</script>
If you've looking for both images to be hidden on the first image click or by pressing the button (which I also had to add) you'll need to move the following code up by one line
<div class="modal-content">
<img class="modalimages" src="Images/HairStyling.jpg">
</div>

If you want to add an event to every image, you could use some Javascript like this:
var images = document.querySelectorAll("img")
for( var i = 0 ; i < images.length ; i++ ) {
images[i].addEventListener("click" someFunction)
}
This make it so that when any image is clicked, it calls the someFunction function

Why won't my event listener display modal on click?

I have an image and I would like the modal to be displayed when the image is clicked. The modal has a display of "none" initially.
Here is the (very simple)modal.
<div id="modal" style="background-color: #000;"> <!--MODAL---->
<span id="close">×</span>
</div>
<img id="image" src="agave.jpg"/> <!--Click to display modal-->
This seems simple enough, why isn't it working?
var img = document.getElementById("image");
function displayModal(event){
var modal = document.getElementById("modal");
if(modal.style.display == "none"){
modal.style.display = "block";
}
else{modal.style.display = "none";}
}
img.addEventListener("click", displayModal(event));

It should be: (pass the function itself as the second argument)
img.addEventListener("click", displayModal);
This would pass the result of the function as second argument
img.addEventListener("click", displayModal(event),);

How do I close modal? Code was working, but now it is not.

I am making a portfolio website and want to have a table with previous projects I've worked on. The idea is to have a grid of thumbnails and when you click the image, a modal opens with the project in PDF. Everything is working out, except I cannot close the modal. The script for closing the modal was working before, but I'm not sure what happened. Neither the 'X' nor clicking outside the window are working. Any ideas?
<td><!-- AGNES HAMERLIK PROJECT -->
<!-- Trigger/Open The Modal -->
<button id="agnes"><img src="../images/projectImages/agnes_thumbnail.png" height="250" width="auto" alt="Agnes Hamerlik Thumbnail"></button>
<!-- The Modal -->
<div id="agnesModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<object data="projectFiles/AgnesHamerlikPresentation.pdf" type="application/pdf" width="100%" height="400" alt="Agnes Presentation"></object>
<p>
It appears your Web browser is not configured to display PDF files. No worries, just click here to download the PDF file.
</p>
<p>Now to find out how to insert PDF of project </p>
</div>
</div>
<script>
// Get the modal
var agnesModal = document.getElementById("agnesModal");
// Get the button that opens the modal
var agnesBtn = document.getElementById("agnes");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close");
// When the user clicks on the button, open the modal
agnesBtn.onclick = function() {
agnesModal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
agnesModal.closeModal();
//agnesModal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == agnesModal) {
agnesModal.style.display = "none";
}
}
</script>
</td>
<td><!-- VAN DOREN PROJECT -->
<!-- Trigger/Open The Modal -->
<button id="vandoren"><img src="../images/projectImages/vandoren_thumbnail.png" height="250" width="auto" alt="Van Doren Thumbnail"></button>
<!-- The Modal -->
<div id="vandorenModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<object data="projectFiles/VanDorenPresentation.pdf" type="application/pdf" width="100%" height="400" alt="Van Doren Presentation"></object>
<p>
It appears your Web browser is not configured to display PDF files. No worries, just click here to download the PDF file.
</p>
<p>Now to find out how to insert PDF of project </p>
</div>
</div>
<script>
// Get the modal
var vandorenModal = document.getElementById('vandorenModal');
// Get the button that opens the modal
var vandorenBtn = document.getElementById("vandoren");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close");
// When the user clicks on the button, open the modal
vandorenBtn.onclick = function() {
vandorenModal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
vandorenModal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == vandorenModalModal) {
vandorenModal.style.display = "none";
}
}
</script>
</td>
</tr>
<tr>
<td><!-- Platinum Sales Group Project -->
<!-- Trigger/Open The Modal -->
<button id="psg"><img src="../images/projectImages/psg_thumbnail.png" height="250" width="auto" alt="Platinum Sales Group Thumbnail"></button>
<!-- The Modal -->
<div id="psgModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<object data="projectFiles/psgFINAL.pdf" type="application/pdf" width="100%" height="400" alt="Platinum Sales Group Presentation"></object>
<p>
It appears your Web browser is not configured to display PDF files. No worries, just click here to download the PDF file.
</p>
<p>Now to find out how to insert PDF of project </p>
</div>
</div>
<script>
// Get the modal
var psgModal = document.getElementById('psgModal');
// Get the button that opens the modal
var psgBtn = document.getElementById("psg");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close");
// When the user clicks on the button, open the modal
psgBtn.onclick = function() {
psgModal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
psgModal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == psgModal) {
psgModal.style.display = "none";
}
}
</script>
</td>

How to use html from one html page to other html page?

I have a popup bootstrap code in html file and i want to use in another html file.I have created a button in html file and i want to cal model which is in another html file.How can i do this??
A.html
<div class="container-fluid">
<div class="row">
<div class="col-xs-12"> <button type="button" id="myBtn" class="btn btn-success" style="width:200px;font-size:30px; transform: rotate(-90deg);
transform-origin: right, top;
-ms-transform: rotate(-90deg);
-ms-transform-origin:left, top;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin:left,center;
position: fixed; bottom:30%; right: -73px;
color:white;" class="btn btn-success">Order</button>
</div>
</div>
</div>
<script type="text/javascript">
// 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("close2")[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>
B.HTML
<html>
<head></head>
<body>
<!-- The Modal -->
<div id="myModal" class="modal2">
<!-- Modal content -->
<div class="modal-content2">
<div class="modal-header">
<span class="close2">×</span>
<h2>Order Services</h2>
</div>
<div class="modal-body2">
</div>
<!-- <div class="modal-footer">
<h3>Modal Footer</h3>
</div> -->
</div>
</div>
</body>
</html>
I want to use B.HTML from A.HTML .How can i accomplish this?

Use this script on A.html file
$(document).load( "B.html", function() {
alert( "Load was performed." );
});

Try this code inside A.html .
<div id="myModalContainer"></div>
$(document).ready(
function() {
$( "#myModalContainer" ).load( "B.html #myModal" );
}
);

you can use jquery or
you cant create your modal as string that contain htmls code in it
for example
var = '<div class="model">...</div>'
and then set this script in js file and then import it in any file you want to use modal
at the end you can append it into your body or remove it
you can see this link
http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal