We Keep Coding

How to open pdf in modal using javascript/jquery/bootstrap?

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

modal not opening when user clicks on modal trigger

I have a pretty basic modal function on my website which displays a like, repost & comment modal, above the track, in which trigger has been clicked.
However, I have had to set it up in an odd way due to the tracks being displayed procedurally through PHP.
This is my simplified markup:
<div class="f-wave-send">
<div class="t__trigger-actions"> <!-- this is the modal trigger button !-->
<span id="trigger-actions-modal"></span>
</div>
<div class="f-track__actions" id="track-actions"> <!-- this is the modal !-->
<div class="close-actions"> <!-- this is the close button !-->
<span></span>
</div>
<div class="f-track-actions-inner">
<!-- modal contents !-->
</div>
</div>
</div>
This markup is duplicated across the page (to represent each track within the database); similar to Facebook's feed.
This is the JS which controls all the modals functionalities:
$(".t__trigger-actions").click(function(){ // when one of the modal triggers is clicked
var parent = $(this).parent();
parent.find(".f-track__actions").css("display", "block"); // get the modal within ONLY the same container to display
parent.addClass("modal__open"); // and add the class modal__open to the container
});
$(".close-actions").click(function(){ // when the close button is clicked
$(".modal__open").children(".f-track__actions").css("display", "none"); // hide the modal
$(".f-wave-send").removeClass("modal__open"); // remove the modal__open class from the container
});
$(document).bind('click', function(e) { // if user clicks on anything but the main container
if(!$(e.target).is('.modal__open')) {
$(".modal__open").children(".f-track__actions").css("display", "none"); // hide the modal
$(".f-wave-send").removeClass("modal__open"); // remove the modal__open class from the container
}
});
I have commented where possible trying to explain what is going on. But I'll explain here once again;
When a user clicks on one of the many modal triggers within the document, it will get that triggers modal, and display it (and add the class modal__open to it's parent container).
If a user clicks on the close button (or on the document), close that same modal.
I've been stuck trying to figure this out for a little while now, so all help (and suggestions) are appreciated.
Thanks.
EDIT:
What I want to happen is, when the modal opens, it ONLY closes when the user clicks out of the modal, OR on the close button (if that makes sense).

Is this what you want?
- Added closest() instead of parent just in case its not a direct parent.
- Added e.stopPropagation() to the 'open' button.
$(document).ready(function() {
$(".t__trigger-actions").click(function(e) {
var topClass = $(this).closest('.f-wave-send');
topClass.find(".f-track__actions").css("display", "block");
topClass.addClass("modal__open");
$(this).next().addClass("modal__open");
e.stopPropagation();
});
$(".close-actions").click(function() {
$(".modal__open").children(".f-track__actions").css("display", "none");
$(".f-wave-send").removeClass("modal__open");
});
$(document).bind('click', function(e) {
var container = $(".modal__open");
if (!container.is(e.target) && container.has(e.target).length === 0) {
$(".modal__open").children(".f-track__actions").css("display", "none");
$(".f-wave-send").removeClass("modal__open");
$(".f-track__actions").removeClass("modal__open");
}
});
})
.f-track__actions {
display: none;
}
.f-wave-send {
border: 2px solid red;
}
.t__trigger-actions {
height: 40px;
border: 1px solid green;
}
.f-track__actions {
height: 60px;
border: 1px solid blue;
}
.close-actions {
display: inline-block;
width: 50px;
height: 30px;
background-color: #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f-wave-send">
<div class="t__trigger-actions">
<!-- this is the modal trigger button !-->
<span id="trigger-actions-modal">Open</span>
</div>
<div class="f-track__actions" id="track-actions">
<!-- this is the modal !-->
<div class="close-actions">
<!-- this is the close button !-->
<span>Close</span>
</div>
<div class="f-track-actions-inner">
<input/>
<!-- modal contents !-->
</div>
</div>
</div>

Open pdf in <DIV> found in another page

I have two html pages, "page1.html" and "page2.html".
page1.html contains a css menu list which will link to page2.html. Part of sample code is below:
<div class="menu">
<ul>
<li>page1</li>
<li>page2
<ul>
<li><a href="page2.html" onclick="displaypdf1();" >pdf1</a></li>
<li>pdf2</li>
when click on one of the link , the tag in "page2.html". However i cannot achieve this. it does not load the pdf correctly.
displaypdf1() javascript function as below:
function display_cover(){
var myPDF = new PDFObject({
url: 'Cover.pdf',
pdfOpenParams: {
view: 'FitB',
viewrect:
'0,0,1000,900',
pagemode: 'none',
scrollbars: '1',
toolbar: '1',
statusbar: '1',
messages: '1',
navpanes: '1' }
}).embed('pdf_display');
}
i'm using pdfObject for opening pdf.
In short i wish to open a pdf file through page1.html css menu.PDF will then be displayed on page2.html in a tag How can i achieve that? Thank you!

You can do this with ajax as follows:
Page 1 HTML
<style>
.wrapper {background-color: #cdcdcd; width: 100%; height: 700px }
object {margin: 0; padding: 0; height: 100%; width: 100%; }
#target { width: 600px; height: 650px; }
input { position:relative; left:20px; }
</style>
<body>
<div class="wrapper">
<input type="button" value="Go">
<div id="target"></div>
</div>
</body>
The button is the trigger,. It can be triggered with an a ref or even a list item from a nav menu.
The id target can be placed in any page as well. I made it so that it displays in this same page but you can change it as you please.
Page 1 JS/JQUERY
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('input').click(function(){
$('#target').load('page2.html');
});
});
</script>
Hopefully this works for you
Page 2 HTML
This is the PDF in an object element that will be loaded as an external page inside your page without refreshing the page or in another page if you choose that.
<object data="https://bitcoin.org/bitcoin.pdf" type="application/pdf" width="50%" height="700px">
alt : page2.pdf
</object>

I tried with your suggestions and it works wonderfully on internet explorer but not chrome. Something wrong with .load. The page has displayed blank. Based on the concept that you had given, i managed to solve my problem!
JS/JQUERY
//script for display Cover.pdf
$(document).ready(function(){
$('#input').click(function(){
document.getElementById('project_details').innerHTML =
'<object type="application/pdf" data="pdf1.pdf" width=1000px height="810px" >
</object>'
});
});
I created a sample based on your idea with the JS above and it works. Hopefully this will be useful for someone else. Thanks lotusms.

Link a text to a dialog box containing an iframe

Say I have this text Click me, and I want a modal window, which contains an iframe to a website (eg., www.google.com) to come up whenever one clicks on the text.
How should I go about doing this? I did some googling and an example of the iframe
%iframe{:src => "http://www.google.com"}
But I am not sure how I could use it ...
Here's the structure of my view file (html.haml), I tried something like this (but it didn't work!):
...
%li
= User_name
= link_to 'Click me' %iframe{:src => "http://www.google.com"}
%li
...
Again, how do I open a popup when some one clicks on the 'Click me' text?

I am sure you do not want to use an iframe for displaying the content from a url, instead you want to shoe it in a pop up window. Yo can use fancybox-rails gem. after installing the gem as described in the readme add this in your view file
%li
= User_name
= link_to 'Click me', "http://www.google.com", :class => "iframe"
and this in your javascript file
$(document).ready(function() {
$("a.iframe").fancybox();
});
You can read more about the uses here. There are many other jquery plugins available for the same.

Use a link with its target attribute set to the value of the name attribute on your modal <iframe>:
Open Bing in an iframe
<iframe src="#" name="modal"></iframe>
Then in your JS:
var modalTriggers = Array.prototype.slice.call(document.querySelectorAll('a[target=modal]'));
var modal = document.querySelector('iframe[name=modal]');
modalTriggers.forEach(function(trigger){
trigger.addEventListener('click', function() {
modal.classList.toggle('active');
}, false);
});
And Some CSS:
iframe[name=modal] {
display: none;
width: 92%;
height: 92%;
position: fixed;
top: 4%; left: 4%;
background: white;
box-shadow: 0 2px 12px 6px rgba(0,0,0,.6);
}
iframe[name=modal].active {
display: block;
}
Demo (edit)
On MDN

there are a couple ways to do this if i understand you correctly. this is a simple approach if you include jquery into your html
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#clickMe').click(function(){
$('#myIframe').show();
});
});
</script>
</head>
<body>
<input id="clickMe" name="clickMe" type="button"/>
<iframe id="myIframe" style="display:none;" src="http://www.othersite.com/some/path?param1=value1&param2=value2">
<p>Placeholder text; only shows up if the page DOESN'T render!</p>
</iframe>
</body>
</html>
you'd also want to style your iframe to behave like a modal window...there are lots of tutorials on that.... as well as handle the closing behaviors
this is a more in depth explanation http://www.jacklmoore.com/notes/jquery-modal-tutorial

Writing a JavaScript function to open an image in (css)pop up with a close button?

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>