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
Related
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;">
This is what I tried, doesn't work. The result on my web page is a blank div at the bottom. I expected the css to darken the page when the ad shows up brighten when it is closed. But it doesn't.
function adTimer() {
setTimeout(banner, 5000);
}
var btn = document.querySelector('#btn-dismiss')
btn.addEventListener("click", function() {
bannerad = document.querySelector('#darken');
bannerad.style.display = 'none';
document.querySelector("html").classList.remove("darkenPage");
});
function banner() {
btn.innerhtml = "x";
bannerad.innerhtml = "Click here to go to our request page";
document.Banner.src = 'images/banner.jpg';
document.querySelector("html").classList.add("darkenPage");
}
var image = new image();
image.src = 'images/banner.jpg';
html.darken {
background-color: black;
}
html.darkenP body {
opacity: 0.5;
}
<div align="center">
<div id="banner-ad">
<img width="400px" height="400px" style="border-radius:40px; font-size:40px;" name="Banner" />
<button id="btndismiss"></button>
</div>
</div>
I've started this over and got what I was looking for. This is JavaScript I used:
var modal = document.getElementById("myModal");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
window.onload = function() {
setTimeout(function (){modal.style.display="block";},5000);
}
// 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";
}
}
This is html I used:
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>texxt</h2>
</div>
<div class="modal-body">
<p>text</p>
<p>text</p>
</div>
<div class="modal-footer">
<h3>footer text</h3>
</div>
</div>
</div>
In my website I have a problem with my modal. It is supposed to be triggered by an icon appearing close to the embed tags. Although it works to activate the modal, it just displays the modal-content without anything in it; after closing the modal and making a second click on the openModal() function the wanted embed file is displayed. Then when clicking another document it displays the preceding document until closed and clicked again. Why is this happening and what should I do to fix it?
HTML (but with only one embed) :
<div class = "overlay-cont">
<embed src="link-to-pdf.pdf" >
<div class = "overlay">
<img class = "enlarge-icon" src = "arrow-icon.svg" onclick ="openModal(0)">
</div>
</div>
<div id = "myModal" class = "modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<embed id = "currentDoc">
</div>
</div>
JavaScript:
var doc = document.getElementsByTagName("EMBED");
function openModal(n){
document.getElementById("myModal").style.display = "block";
document.getElementById("currentDoc").src = doc[n].src;
}
function closeModal(){
document.getElementById("myModal").style.display = "none"
}
Instead of having a static embed element and giving it dynamic src attribute value, generate dynamic embed element every time you show the modal and remove it every time you close the modal.
var doc = document.getElementsByTagName("EMBED");
function openModal(n) {
var modal = document.getElementById("myModal");
modal.style.display = "block";
var node = document.createElement("embed");
var src_attr = document.createAttribute("src");
src_attr.value = doc[n].src;
node.setAttributeNode(src_attr);
modal.appendChild(node);
}
function closeModal() {
var e = document.querySelectorAll("embed")[1];
e.parentNode.removeChild(e);
document.getElementById("myModal").style.display = "none"
}
<html>
<head>
</head>
<body>
<div class="overlay-cont">
<embed src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="overlay">
<img class="enlarge-icon" src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d" onclick="openModal(0)">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content"></div>
</div>
</body>
</html>
I am facing a weird issue here. It might be a very silly mistake that I am doing.
function addTrainer() {
var modal = document.getElementById('add-trainers-form');
var span = document.getElementsByClassName("close")[0];
$(this).click(function(event) { //this part of code works fine,
$('.modal').css('display', 'block');
});
$(span).click(function(event) { //not working
// modal.style.display = "none";
$('.modal').css('display', 'inherit');
});
$(window).click(function(event) { //this also works fine
if (event.target == modal) {
modal.style.display = "none";
}
});
$('#add-trainer-btn').click(function() { //not working
$('.modal').css('display', 'none');
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="add-trainers-controls">
<div class="add-remove-control">
<input id="add-trainer" type="image" src="img/add5.png" alt="Submit" width="48" height="48" onclick="addTrainer()">
</div>
</div>
<!-- The Modal -->
<div id="add-trainers-form" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="close" class="close">×</span>
<p>Add Trainers</p>
<input class="textStyle" type="text" placeholder="Username">
<input class="textStyle" type="text" placeholder="Email">
<button id="add-trainer-btn" class="buttonStyle" type="button">Add</button>
</div>
</div>
</div>
When I click on #add-trainer button, modal pops up. Its default css property is set to display:none. After clicking it is set to display:block. When I click anywhere outside the modal window, display property is reset to none. But the same needs to be done with #add-trainer-btn and #close button which is not working.
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>