How to open pdf in modal using javascript/jquery/bootstrap without download?
I am trying using bootstrap modal but it not working.
Why ?
I am using code for below source - http://bootsnipp.com/snippets/P3Vvm
<div class="container">
<div class="row">
<h2>Showing PDF in popup modal preview using Bootstrap Easy Modal Plugin</h2>
<a class="btn btn-primary view-pdf" href="http://wellnesshabitat.nexmapp.com/wp-content/uploads/2017/04/License.pdf">View PDF</a>
</div>
</div>
Jquery code:
/*
* This is the plugin
*/
(function(a){a.createModal=function(b){defaults={title:"",message:"Your Message Goes Here!",closeButton:true,scrollable:false};var b=a.extend({},defaults,b);var c=(b.scrollable===true)?'style="max-height: 420px;overflow-y: auto;"':"";html='';html+='';html+='';html+='';html+='×';if(b.title.length>0){html+=''+b.title+""}html+="";html+='";html+=b.message;html+="";html+='';if(b.closeButton===true){html+='Close'}html+="";html+="";html+="";html+="";a("body").prepend(html);a("#myModal").modal().on("hidden.bs.modal",function(){a(this).remove()})}})(jQuery);
/*
* Here is how you use it
*/
$(function(){
$('.view-pdf').on('click',function(){
var pdf_link = $(this).attr('href');
var iframe = '<div class="iframe-container"><iframe src="'+pdf_link+'"></iframe></div>'
$.createModal({
title:'My Title',
message: iframe,
closeButton:true,
scrollable:false
});
return false;
});
})
.iframe-container {
padding-bottom: 60%;
padding-top: 30px; height: 0; overflow: hidden;
}
.iframe-container iframe,
.iframe-container object,
.iframe-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Please show us your code you have so far. Also, you cannot show a pdf in a modal by default bootstrap / jQuery. You have two options:
Use a lib like this one
Use an iframe inside the modal and load this GDocs link:
https://docs.google.com/gview?embedded=true&url=" + LinkToThePDFFile
Please provide more information for a better answer.
1) Checkout PDFObject JS,
<script src="https://github.com/pipwerks/PDFObject/blob/master/pdfobject.min.js"></script>
1)PDFObject embeds PDF files into HTML documents. https://pdfobject.com/
2) Easy Modal Plugin for Bootstrap. http://bootsnipp.com/snippets/VX7EN
3) Using jQuery Dialog Modal Popup Window.
Hope it helped.
[1]: http://bootsnipp.com/snippets/VX7EN
Related
I have the following jQuery code to show a modal popup inside my asp.net MVC core web application:
$(document).ready(function () {
$(function () {
$.ajaxSetup({ cache: false });
$(document).on('click', 'button[data-modal]', function (e) {
$('#myModalContent').css({ "margin": "5px", "max-height": screen.height * .82, "max-width": screen.height * .82, "overflow-y": "auto" }).load($(this).attr("data-url"), function () {
$('#myModal').modal({
height: 1000,
width: 2200,
resizable: true,
keyboard: true,
backdrop: 'static',
draggable: true
}, 'show');
});
return false;
});
});
});
and the following HTML:
<div id='myModal' class='modal fade in'>
<div class="modal-dialog">
<div class="modal-content">
<div id='myModalContent'></div>
</div>
</div>
</div>
now the modal popup will render a partial view which will show a horizontal tool bar when accessed from normal windows machine (as the partial view has a lot of horizontal content), but if I access the modal popup inside my iPhone then I can not scroll down inside the modal popup. If I try to scroll down, I will be actually scrolling the main page and not the modal popup. Any advice on how I can fix this?
You can configure this in such a way that when your modal opens, add a class to your <body> element to prevent it from scrolling.
On your js, include this where you toggle your modal:
$(document.body).addClass('modal-open'); Do this when your modal opens
$(document.body).removeClass('modal-open'); Do this when your modal closes
Then in your css, you can apply some style to that specific class:
body.modal-open {
overflow: hidden !important;
position: fixed !important;
}
If you're using bootstrap, you might consider using checking this out. I am not sure if this is still the case, I'm not familiar with bootstrap.
Maybe this answer can help you. It sugests the following CSS for a similar problem:
body.modal-open {
position: fixed;
overflow: hidden;
left:0;
right:0;
}
.modal{
-webkit-overflow-scrolling: auto;
}
So I created this webpage using JQuery. I use this code to resize the images on my page so that they fit in squares.
<script type="text/javascript">
$(document).ready(function(){
var height = $('.square').width();
$('.square').css('height', height);
window.onresize = function(event) {
var height = $('.square').width();
$('.square').css('height', height);
}
});
</script>
This works perfectly. The images resize to squares when I load the page or when i resize my browser window. The problem is when I go and press print page (I'm using google Chrome). The printer preview loads the page as if these two scripts don't exist. So the images are their original sizes.
Any Ideas ?
If you just want to keep images square, you might not even need javascript, the below gives you an example, the bonus it's responsive..
.pic-wrapper {
width: 40%;
float: left;
margin-right: 20px;
}
.pic {
width: 100%;
padding-bottom: 100%;
background-image: url('http://i.imgur.com/uTDpE6J.jpg')
}
<div class="pic-wrapper">
<div class="pic">
</div>
</div>
<div class="pic-wrapper">
<div class="pic">
</div>
</div>
I have created an html5 banners and validated it here:
https://h5validator.appspot.com/dcm.
It returns the error: "Missing click tag check".
How do I implement a clickTag? I've found this code on google support:
<html>
<head>
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
var clickTag = "http://www.google.com";
</script>
</head>
<body>
<a href="javascript:window.open(window.clickTag)">
<img src="images/dclk.png" border=0>
</a>
</body>
</html>
But isn't the destination URL of the banner set after uploading the ZIP file in DoubleClick?
Do I have to set the destination URL hardcoded in the HTML? Doesn't make any sense to me..
I have made a lot of flash banners in the past and there you only referred to a variable _root.clickTag.
Can anyone help me out?
Thanks
In order to create a doubleclick studio banner you need to import doubleclick studio library and initialize enabler. Then set Exit_url. Save yourself all the trouble create the Banner in Google Web Designer its easy and will upload directly to DC studio
<script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
<style>html, body {width: 100%; height: 100%}
#bg-exit {
background-color: rgba(255,255,255,0);
cursor: pointer;
height: 381px; //banner height
left: 0px;
position: absolute;
top: 19px;
width: 400px; //banner width
z-index: 1;
}</style>
<div id="bg-exit"></div> <!-- put this div inside your main container of banner -->
<script>
window.onload = function() {
if (Enabler.isInitialized()) {
enablerInitHandler();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
}
}
function enablerInitHandler() {
}
function bgExitHandler(e) {
Enabler.exit('Background Exit');
}
document.getElementById('bg-exit').addEventListener('click', bgExitHandler, false);
</script>
Using this code you can change the exit_url from DC studio Dynamically
I am a new HTML developer, so can someone please describe briefly how to write a JavaScript function to open an image in (css) pop up with a close button?
Just to get you started I've set up an simple example for you, try it out here: http://www.lunarailways.com/demos/popup.html
<html>
<head>
<style>
#popup {
border: 1px solid gray;
border-radius: 5px 5px 5px 5px;
float: left;
left: 50%;
margin: auto;
position: fixed;
top: 200px;
z-index: 9999;
}
</style>
</head>
<body>
<h1>Your page</h1>
Open Image 1
Open Image 2
Open Image 3
<div id="popup" style="display:none">
<a id="popup-close" href="" class="button">Close</a>
<p>
<img id="image-placeholder" src="">
</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$(".popup-open").click( function(e) {
$("#popup:visible").hide(); //hide popup if it is open
e.preventDefault(); // don't follow link
$("#image-placeholder").attr("src", $(this).attr("href")); // replace image src with href from the link that was clicked
$("#popup").fadeIn("fast"); //show popup
});
$("#popup-close").click( function(e) {
e.preventDefault();
$("#popup").fadeOut("fast");
});
});
</script>
</body>
</html>
FanyBox, which is uses the jQuery library is the right tool for that.
In a simple way,
- place anchor and image tags in a div container.
- set display attribute of the div to "none".
- create displayMyPopup and closeMyPopup functions in js.
- set anchor's onclick attribute to closeMyPopup.
- in displayMyPopup function, set the div's display attribute to "block"
- in closeMyPopup function, set the div's display attribute to "none"
or you can use jquery's show/hide functions.
I guess jQuery library is a good start. Start with defining your HTML markup and then google image galleries and see what fits your bill.
Something like this:
<ul class="gallery">
<li><img src="path-small-image" alt="thumbnail" /></li>
</ul>
I am using ColorBox to launch a modal window on my site. In the modal a SurveyMonkey survey loads. At the end of the survey, depending on how people answer it, they will be offered a link to click. When clicked, we need to CLOSE the modal and then load a new page in the main site under the modal. Is there a way to do that by clicking a link in the modal?
THANKS for your help and expertise.
// put it in the base document
$(document).bind('cbox_closed', function(){
// navigate to new URI in a prefered way
});
// a little different way to achieve same result
$(".example9").colorbox(
{
onClosed:function()
{
// navigate to new URI in a prefered way
}
});
Additional example.
HTML:
<a id="base" href="#">Show colorbox</a>
<div style='display: none'>
<div id='divModal' style='padding: 10px; background: #fff; border: 1px solid red; z-index=100;'>This is test
<a id="google" href="#">google.com</a>
</div>
</div>
JavaScript:
$('a#base').colorbox({inline: false, href:'#divModal', width: "150px", height: "100px"});
$('a#google').click(
function()
{
$.colorbox.close();
window.location = 'google.com';
}
)