I have Problem when trying to make Bootstrap Modals to show PDF Document using <embed src="./pdfFiles.pdf"></embed> Tag. I am using Bootstrap Version 4.5
When user click the button to trigger the modals, Bootstrap modals normally displays PDF document. But, The problem appear when user close the modals and show it again. instead of displaying PDF Document, modals displays blank document.
EDITED
My Code Shown below.
Bootstrap CDN
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<title>PDF Show</title>
Show the modal
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">PDF Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<embed src="http://localhost/pdfFile.pdf"></embed>
<embed src="http://192.168.0.13/pdfFile.pdf"></embed>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I already contained the issue, The PDF Failed to display only when I use the IP address (or base_url() in Codeigniter) to fill pdf link in src="http://192.168.0.1/pdfFile.pdf"
No problem appear when I use http://localhost/pdfFile.pdf
<embed src="http://localhost/pdfFile.pdf"></embed>
<embed src="http://192.168.0.1/pdfFile.pdf"></embed>
Related
The Bootstrap button and modal code below fails when the code is placed inside ColdFusion CFOUTPUT QUERY tags.
If I move the code outside of the cfoutput query then it works well.
Obviously, the problem is with the BootStrap modal single hashtag requirement: target="#staticBackdrop" for the button.
Inside the cfoutput, coldfusion expects two hashtags. The modal does not function without the single hashtag.
Is there a work-around?
<cfoutput query="q_GetPrinters">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
DELETE
</button>
<!-- Modal -->
<div class="modal fade" name="staticBackdrop" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Delete Printer?</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!--- <div class="modal-body">
...
</div>--->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
</cfoutput>
You have to use double hashes for mentioning ids in ColdFusion like,
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="##staticBackdrop">
Reason for this double hash is, in CF hash is used for outputting as it can be enclosed with variable name. While you writing target as #staticBackDrop, it will consider it as a variable name & hashes are not enclosed properly. So you re getting error like this.
I am using Bootstrap4 and in my navbar i have a button to open a modal.I have added jquery,popper and bootstrap js in correct order as mentioned in bootstrap website .I have to click this button 5-6 times continuously to open the modal
<asp:Button ID="btnUserDetails" runat="server" Text="USER DETAILS" data-toggle="modal" data-target="#userDetails" />
my modal is
<div class="modal fade" id="userDetails" tabindex="-1" role="dialog" >
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<asp:Label ID="lblLoginID" runat="server"></asp:Label><br />
<asp:Label ID="lblIPAddress" runat="server" ></asp:Label><br />
<asp:Label ID="lblSystemName" runat="server" ></asp:Label><br />
<asp:Label ID="lblVersionInfo" runat="server" ></asp:Label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I tried using javascript to open the modal by using this code
<asp:Button ID="btnUserDetails" runat="server" Text="USER DETAILS" data-toggle="modal" data-target="#userDetails" OnClientClick="return openmodal();return false;" />
<script type="text/javascript">
function openmodal() {
$('#userDetails').modal('show');
}
</script>
However this does not work .My javascript function is being called as i put an alert message and tested .There is something weird happening with vertical scroll bar though on click of the button ,it shows up for sometime on click of button and vanishes i think once button click event ends .
The issue is with "fade" in the modal
<div class="modal fade" id="userDetails" tabindex="-1" role="dialog" >
i removed fade and used "show" and the modal is working
<div class="modal show" id="userDetails" tabindex="-1" role="dialog" >
also i added a javascript function for the button that triggers the model
<script>
$( '#btnUserDetails').click( function(){
$( '#userDetails').modal('show');
});
</script>
I need to pass the userName to the bootstrap modal window and show the passing name in modal window.
For example,
If i pass jawa the modal will show the content like 'This is jawa'
we need to add the attirbute data-id the in your button like as below,
<button type="button" data-toggle="modal" data-target="##myModal" data-id="jawa">Delete</button>
This JS function will be called before open boostrap modal window. And in that function we can able to get the data-id attribute value and then we can able to write a code based on getting value. See the below code,
<script type="text/javascript">
$('#myModal').on('show.bs.modal', function(event) {
var userName = $(event.relatedTarget).data('id');
$("#modalText").html("You are going to be deleted" + userName);
});
</script>
This is the modal window code,
<div id="myModal" class="modal fade" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="cancelModal">Google Map</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="modalText"></div>
</div>
<div class="modal-footer">
Open in new tab
</div>
</div>
</div>
</div>
Thanks,
HTML:
<!-- Button trigger modal -->
<a href="#" data-toggle="modal" data-target="#myModal" class="quickview">
OPEN MODAL
</a>
<!-- 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">BX Slider</h4>
</div>
<div class="modal-body">
<ul class="bxslider">
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" /></li>
</ul>
<div id="bx-pager">
<a data-slide-index="0" href=""><img src="http://bxslider.com/images/thumbs/tree_root.jpg" /></a>
<a data-slide-index="1" href=""><img src="http://bxslider.com/images/thumbs/houses.jpg" /></a>
<a data-slide-index="2" href=""><img src="http://bxslider.com/images/thumbs/hill_fence.jpg" /></a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JS:
function quickView() {
var slider = $('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
controls: false
});
slider.destroySlider();
//$('#myModal').modal('show');
slider.reloadSlider();
}
$(".quickview").on("click", quickView);
I have a Bootstrap modal which I'm injecting dynamic image galleries into. So fx. I have 10 links on a page, each link is containing unique data-attributes with image URLs. I am then sending these URLs into my click event, so I can use them with BXslider, but it doesn't seem to be working.
I'm reloading the BXslider within my click event, but the "mainimage" is not showing.
However, if I move the code out of the click event, it seems like it's working.
Any suggestions here?
Codepen:
http://codepen.io/marting/pen/dYNabj?editors=101
I changed your code to this, and it works like a charm
JS:
function quickView() {
var slider = $('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
controls: false
});
setTimeout(function() {
slider.reloadSlider();}, 200);
}
$(".quickview").on("click", quickView);
See it works here: http://codepen.io/anon/pen/JYgxOE?editors=101
I am making a Django application and using Twitter bootstrap carousel template for making a my site. I am planning to provide the sign up and sign in feature to the users through Twitter boostrap 3 modal.
and When I test modal simple with my external templates (not included in Django). My Modal runs well.
Here is my Modal code
<ul class="nav navbar-nav pull-right">
<!-- calling sign up modal -->
<li><a data-toggle="modal" href="#signup"><b>Sign Up</b></a></li>
<!-- calling sign up modal finished -->
<!-- sign up modal -->
<!-- Modal -->
<div class="modal fade" id="signup">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- sign up modal finish -->
</ul>
Correct results
See image below
But when I run this modal from Django application templates. the modal loads but one grey transparent screen also loads over it and it makes the whole page disabled.
See image below
What would be the problem
I solved this issue by defining my modal code outside the ul tags, I put my modal code just after start of the body tag and it worked for me.
This is my code
<!-- Modal 1 -->
<!-- define the sign up modal finished -->
<!-- sign up modal -->
<!-- Modal -->
<div class="modal fade" id="signup">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">TrackLeech Sign Up</h4>
</div>
<div class="modal-body">
<form class="navbar-form form-inline" align="left">
<input type="text" placeholder="username" class="form-control" style="width: 200px;">
<!-- Fb Login --> <div class="fb-login-button pull-right" data-width="400">Login with Facebook</div><!-- Add FB Button Here --> <br><br>
<input type="text" placeholder="email" class="form-control" style="width: 200px;"> <!-- Add Google Button Here --> <br><br>
<input type="password" placeholder="password" class="form-control" style="width: 200px;"> <!-- Add Twitter Button Here --><br><br>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Sign Up</button><br><br>
<a data-toggle="modal" data-dismiss="modal" href="#signin" >Already a member ? Sign In</a>
</form>
<div class="pull-right">
</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">Sign Up</button>
<a data-toggle="modal" href="#signin" >Already a member ? Sign In</a> -->
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- sign up modal finish -->
This has resolved my issue now.