I am trying to open a remote web application in a Bootstrap modal using the following:
Open Modal
<!-- Modal -->
<div class="modal fade" id="remoteModal" tabindex="-1" role="dialog" aria-labelledby="remoteModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
</div>
The app opens but NOT in a modal window, and when I close it, it closes both itself and the application that called it. I am using asp.net MVC.
Any assistance is greatly appreciated!
In order to get the remote site to open in the Bootstrap modal, I had to place it in an iFrame like so:
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Document Management</h4>
</div>
<div class="modal-body">
<iframe height="660" width="100%" frameborder="0" src="{{iframe}}"></iframe>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Exit</button>
</div>
</div>
</div>
The src is the url of the remote site. I hope this helps someone else. Happy coding!
Related
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>
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,
I have a modal like below:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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>
<h3 class="modal-title">Modal Demo</h3>
</div>
<div class="modal-body">
google
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
When the modal pops up and I click "google", I expect to see the page shown within the modal. Is it possible? I don't have to use modal but would like solution "compatible" with bootstrap.
Thanks for the help.
Put this code in HTML
<div class="modal fade bs-modal-sm" id="modal" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
Jquery Function
function show_modal(target, title, size) {
jQuery('#modal').removeData('bs.modal');
jQuery('.modal-content').html('');
jQuery('.modal-dialog').removeClass('modal-lg');
jQuery('#modal').removeClass('create_event_task');
jQuery('.modal-dialog').addClass(size);
var newTarget = target.indexOf("?") >= 0 ? target + '&modal-title=' + title : target + '?modal-title=' + title;
jQuery('#modal').modal({remote: encodeURI(newTarget)});
}
Call JQuery function , using Onclick event.
show_modal('admin_users', 'Delete User', '');
I am using this function for open a page within my application , you can try it using a URL.
Hope this answer is helpful to you.
I'm no fan of the blocking browser confirmation dialogues currently used for delete confirmations by phoenix_html. Given that Phoenix ships with Bootstrap by default, how do I integrate the Bootstrap modal component with Phoenix?
I've implemented the delegation of this dialogue to a Bootstrap modal component if (and only if) jQuery is available and a suitable DOM element is present.
Copy this modal.js gist to the web/static/js folder in your Phoenix project.
Comment out the import "phoenix_html" line in web/static/js/app.js
Include the HTML for a Bootstrap modal component in your HTML template. The Bootstrap documentation advises to:
Always try to place a modal's HTML code in a top-level position in
your document to avoid other components affecting the modal's
appearance and/or functionality.
Make sure that your HTML includes the id="phoenix-bs-modal" on the top-level <div class="modal">, and that a primary (confirmation) button <button class="btn-primary"> is present in the modal:
<div class="modal fade" id="phoenix-bs-modal" tabindex="-1" role="dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</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 -->
The message passed in via the data-confirm attribute on the delete link is forwarded to the modal body.
This has been useful for me to get a coherent layout. I'm putting my solution out there because hopefully it's useful to others as well.