My requirement is, on click of a button, a pdf file should be displayed on dialog modal.
Please Help!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>View PDF</h2>
<!-- Trigger the modal with a button -->
<button type="button" href="A - Cover Page.pdf" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">A - Cover Page</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You can also embed the pdf inside the modal.
Like this:
<embed src="sample.pdf" frameborder="0" width="100%" height="400px">
That worked for me
Sorry to disappoint you but one cannot just show the pdf inside a modal by default. It is not an intended behavior. Even using <iframe>, you cannot render the pdf inside the bootstrap modal. Also most of the hacks provided online does not support cross-browser. The more ideal way is to use plugins for the same and I will give you the links for few using which you can achieve what you want.
1) Checkout PDFObject JS,
<script src="https://github.com/pipwerks/PDFObject/blob/master/pdfobject.min.js"></script>
PDFObject embeds PDF files into HTML documents. Link.
2) Easy Modal Plugin for Bootstrap. Demo Snippet and Website
3) Using jQuery Dialog Modal Popup Window. Demo.
Hope it helped.
<div class="modal fade" id="modal-agreement">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<object type="application/pdf" data="path/to/pdf" width="100%" height="500" style="height: 85vh;">No Support</object>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
You can as well try this
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>DisplayPDF</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<embed src="~file:///C:/Users/hp/Downloads/sb_finance.pdf" frameborder="0" width="100%" height="400px">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Can add iframe in modal/popup.
<iframe src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" width="600" height="780" style="position: absolute;top: 66px;bottom: 0px;right: 0px;width: 100%;border: none;margin: 0;padding: 0;overflow: hidden;z-index: 3;height: 100%;"></iframe>
based on your requirement you can style the parameter.
Full screen Modal displaying pdf using Vuejs in JS.
html
<div class="modal " tabindex="-1" id="idXyz">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">[[formName]]</h5>
<button type="button" class="btn btn-danger"
data-bs-dismiss="modal" aria-label="Close">close
</button>
</div>
<div class="modal-body">
<embed v-bind:src="getUrl" frameborder="0" width="100%" height="100%">
</div>
</div>
</div>
</div>
Javascript
var pdfVueModal = new Vue({
el: '#idXyz',
data: {
getUrl: null,
formName: null
},
methods: {
showPdf: function (getUrl, formName) {
this.getUrl = getUrl;
this.formName = formName;
$('#idXyz').modal('show');
}
},
delimiters: ["[[", "]]"],
});
But I am getting error like this : Not allowed to load local resource: file:///D:/
Well... Your browser is not allowed to directly load that file from your harddrive. In your view you are probably getting something like this:
<img src="C:\xampp\htdocs\socialNet\public\uploads\joew.png" />
You need a URL for the browser to access this image. In your view you need something like:
The asset() function from Laravel creates a URL from the public folder and appends the param you give it. So this will create a URL like: http://localhost/public/uploads/joew.png
Edit: The folder you specified (storage_path) is probably not readable for the browser at all. Change the uploads to public_path('uploads') and it will be accessible.
Related
I have a modal and I want to ask the user to authenticate before showing the modal (that overrides server files with the modal content).
I want the user to click on my editmodal button, to show a connection form and if it's the same as my json base64 encoded data the modal get shown.
My problem: I can't get my modal to be shown with any of those
$('#Modal').modal();
$('#Modal').modal('toggle');
$('#Modal').modal('show');
my code is :
<button id="buttonmodal" type="button" class="btn btn-primary" data-target="#exampleModal">
(i removed the data-trigger for i want to do it in js)
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content" style=" width: 600px;
height: 600px;">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button id="closebtn" type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="" name="modal-form" style="width: 100%; height:70%" method="post">
<textarea id="textarea_modal" name="textarea_modal" style="min-width: 100%; min-height:100%"></textarea>
<div class="modal-footer">
<button id="buttonSave" type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
and my js is pretty simple for now :
$('#buttonmodal').click(function() {
debugger;
var text = $('#data').text();
$('#textarea_modal').val(text);
$('#exampleModal').modal('show');
});
If ever you have tips or other way to do it, it would help a lot.
You are looking for id "Modal", while your component is using a class "modal" with an id "exampleModal". <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
To fix this you might want to change your code to:
$('.modal').modal();
$('.modal').modal('toggle');
$('.modal').modal('show');
or
$('#exampleModal').modal();
$('#exampleModal').modal('toggle');
$('#exampleModal').modal('show');
It all depends on how you would like to be finding your component.
Note: # is used for ids, while . for classes
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Button to Open the Modal
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> -->
<button type="button" class="btn btn-primary" id="buttonmodal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content" style="width: 600px; height: 600px;">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form action="" name="modal-form" style="width: 100%; height:70%" method="post">
<textarea id="textarea_modal" name="textarea_modal" style="min-width: 100%; min-height:100%"></textarea>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button id="buttonSave" type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
$('#buttonmodal').click(function() {
debugger;
var text = $('#data').text();
$('#textarea_modal').val("test 123");
$('#myModal').modal('show');
});
</script>
</body>
</html>
Ok i was dumb, the solution was : my css link where point on bootstrap 4.3 where my script was going on an older version so i had conflict version that wern't shown in the console.
Ty for those who helped
I would like to open a modal dialog of an iframe. When a user clicks the button should load the URL and pop up the URL content as a Modal.
However, for some reasons, this fails as shown on the code below. I am borrowing the idea from this http://jsfiddle.net/limeric29/C3LkL/
The example uses JQuery 1.8 but I would want to use 3.3. I suspect that's the reason for the failure.
$('a.btn').on('click', function(e) {
e.preventDefault();
var url = $(this).attr('href');
$(".modal-body").html('<iframe width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="true" src="'+url+'"></iframe>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<a data-toggle="modal" class="btn" href="http://www.bing.com" data-target="#myModal">click me</a>
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
</div>
</div>
Anyone lead me?
Try This
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<a id="zoe" href="https://www.bing.com" data-toggle="modal" data-target="#myModal">Click Me</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
$('#zoe').on('click', function(e) {
e.preventDefault();
var url = $(this).attr('href');
$(".modal-body").html('<iframe width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="true" src="'+url+'"></iframe>');
});
</script>
</body>
</html>
I have some trouble with overlays.
I want to create a page where on a button click, lets say "Login" button, a small popup window should appear to accept username and password etc. And the background should get applied with overlay.
You can use bootstrap modal to do this and create a login form in it. Like below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
For more details visit this https://www.w3schools.com/bootstrap/bootstrap_modal.asp
Thanks
At first you create a division that cover whole page using transparent background.After that create another new division in that div .
#model{
position:fixed;
top:0px;
left:0px;
width:100%;
height:800px ; //Height of the screen
background:rgba(30,30,30,0.7);
}
<div id="model">
// your form here goes ...
</div>
So I wanted to create this concept of a simple game where imgs are loaded onto a screen and alert pop ups for each one,sort of like find an object game. I have that part done but I wanted to create an instance of a conditional statement that checks to see if the image was clicked.
When all elements have been clicked I was going to incorporate a pop up stating that the user has clicked everything on the page?Help please!
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Something like this should get you started:
//$('body').css('background','blue');
var arrBoxes = [];
var ttl = $('.mybox').length;
$('.mybox').click(function(){
var bx = this.id;
if (arrBoxes.indexOf(bx) >= 0){
alert('already clicked');
}else{
arrBoxes.push(bx);
}
if (arrBoxes.length == ttl) alert('all done');
});
.mybox{float:left;width:150px;height:150px;margin:10px;}
.modal-body{overflow:auto;} /* Fixes float:left */
#b1{background:palegreen;}
#b2{background:wheat;}
#b3{background:pink;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div id="b1" class="mybox">Box One</div>
<div id="b2" class="mybox">Box Two</div>
<div id="b3" class="mybox">Box Three</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
You can use any of these three sample layouts. They are listed in order of popularity, with most popular at top. However, they all work just fine:
<!DOCTYPE html>
<html lang="en">
<head>
<meta tags go here>
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/mycode.js"></script>
</head>
<body>
<!-- HTML CODE IN HERE -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta tags go here>
<style>
/* Style code in here */
</style>
<script type="text/javascript" src="https://CDN/jquery.js"></script>
<script>
$(document).ready(function(){
/* jQuery code in here */
}); //END document.ready
</script>
</head>
<body>
<!-- HTML CODE IN HERE -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta tags go here>
</head>
<body>
<!-- HTML CODE IN HERE -->
<style>
/* Style code in here */
</style>
<script type="text/javascript" src="https://CDN/jquery.js"></script>
<script>
$(document).ready(function(){
/* jQuery code in here */
}); //END document.ready
</script>
</body>
</html>
If you use the first method, then you would also create these external files:
public_html/css/common.css
public_html/js/jquery.min.js <--- downloaded from jQuery web site
public_html/js/myscripts.js
For the CSS document, you just take the code from between the <style></style> tags and save it into that external file.
For the jQuery document, you just take the code from between the <script></script> tags and save it into that external file.
Above, note that public_html is whatever your webroot is. If you purchase online shared hosting from GoDaddy or HostGator etc., it will usually be public_html. If you install XAMPP locally, it will be htdocs. If WAMP or MAMP, it will be www.
I am creating a pop up div (modal) which will appear on screen by default. However I succeed to open it on button click but I want it open by default whenever I run the HTML page.
Here is my code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Where I am showing the modal using a button.In that I am using data-target property to invoke the modal. So how to do it without any click event?
Add class in to html code , such that
<div class="modal fade show d-block" id="newModal" role="dialog">
or you can call the following function when the page loads
$('#newModal').modal('show');
Use .modal('show') to show the model manually
$(document).ready(function() {
$('#myModal').modal('show');
});
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Sorry I've not enough reputation to add a comment.
according to bootstrap modal component documentation, there's no need to pass any parameter to .modal() method.
$(document).ready(function() {
$("#myModal").modal();
});
Add class in to <div class="modal fade" id="myModal" role="dialog">, such that
<div class="modal fade in" id="myModal" role="dialog">
or you can call the following function when the page loads
$('#myModal').modal('show');
open modal at document.ready()
for eg.
$(document).ready(function (){
//open modal here
$('#myModal').show();
});