The demo with the image loading when clicked on Modal button is here: http://www.bootply.com/7kS6Ube98u
I need to place the iframe instead of the image, but have no idea what code to change, so it loads the same way (i.e. when clicked on the Open Modal button)
Any help is appreciated.
You can simply change the html to use an iframe (without a src attribute), then change the references in the js to iframe to make it clearer. You can see it here
Below is an example of using vanilla JS with Bootstrap 5:
JS:
var modal = document.getElementById('modalId')
modal.addEventListener('show.bs.modal', function (event) {
var iframe = modal.querySelector('iframe');
iframe.src = iframe.getAttribute('data-src');
})
HTML:
<div class="modal modal-blur fade" id="modalId" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
Heading
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-0">
<iframe data-src="http://www.stackoverflow.com" class="w-100"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Related
From a view (let's say MyView.cshtml) in ASP.NET MVC application I am displaying a modal window, _MyConfirmModalWnd.cshtml. I have placed the modal window in Views\Shared folder.
Modal window is shown but some things are not working well:
Look and feel is not being show correctly
Cross button is not being correctly placed in the window
When I click on cross button it is not working, modal window is not closed.
Modal window is not being vertically and horizontally centered on the screen despite I am indicating using modal-dialog-centered class.
My modal window is shown as below:
instead of being shown with a look and feel similar to that shown in bootstrap documentation:
Modal window _MyConfirmModalWnd.cshtml:
<div class="modal fade" id="confirmModalDialog" tabindex="-1" role="dialog" aria-labelledby="modalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">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">
Modal body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary">Yes</button>
</div>
</div>
</div>
</div>
View MyView.cshtml (code in script section):
function askForConfirmation() {
var success = function () {
// Do something on button 'Yes' clicked
};
var cancel = function () {
// Do something on button 'No' clicked
};
var title = "Caution!";
var message = "You are about to invoice,\nDo you want to continue?";
showConfirmation(title, message, success, cancel);
}
showConfirmation = function (title, message, success, cancel) {
var modal = $("#confirmModalDialog");
modal.find(".modal-title").html(title).end()
.find(".modal-body").html(message).end()
.modal({ backdrop: 'static', keyboard: false })
.on('hidden.bs.modal', function () {
modal.unbind();
});
if (success) {
modal.one('click', '.modal-footer .btn-primary', success);
}
if (cancel) {
modal.one('click', '.modal-header .close, .modal-footer .btn-default', cancel);
}
};
Maybe... Do I have to import some specific javascript source files or css files in my modal view _MyConfirmModalWnd.cshtml?
UPDATE:
I have set margin and padding to 0 in the modal window _MyConfirmModalWnd.cshtml as below:
<div class="modal fade" id="confirmModalDialog" tabindex="-1" role="dialog" aria-labelledby="modalCenterTitle" aria-hidden="true" style="margin:0;padding:0">
<!-- Rest of the stuff -->
</div>
...and now modal window appearance seems ok except button 'x':
However modal window is not being vertically and horizontally centered on the screen despite of indicating it by using modal-dialog-centered. Why is it not being centered on the screen? am I missing something else?
UPDATE 2:
Finally I have made some adjustments to modal window:
I have only set style="padding:0px" for outer div. Margin:0px is not necessary.
I have set style="margin-top:-30px" for close button
Below the code:
<div class="modal fade" id="confirmModalDialog" tabindex="-1" role="dialog" aria-labelledby="modalCenterTitle" aria-hidden="true" style="padding:0px">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-top:-30px">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary">Yes</button>
</div>
</div>
</div>
</div>
Now modal window has below look and feel:
Things remaining to do:
To center modal window vertically and horizontally on the screen.
UPDATE 3:
I have done a little more adjustments by overriding style. I have added below style attributes to the outer div:
margin-left:0px
left:42%
Additionally I have set a minimum width:
min-width:15%
With above attributes overrided, modal window is centered horizontally.
To center vertically I have to set style attribute top:40% but once I add this attribute, modal window does not show. However if I open developer tools, with them opened, in debug mode, then modal window is shown. I do not understand why modal window behaves in this way when I add top:40% attribute.... Any ideas?
below the final code:
<div class="modal fade" id="confirmModalDialog" tabindex="-1" role="dialog" aria-labelledby="modalCenterTitle" aria-hidden="true" style="padding:0px;margin-left:0px;left:42%;min-width_15%"> <!-- NOTE:If I add top:40% then modal window is not shown,it is not being opened. It is only shown in debug mode when I make visible developer tools window -->
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-top:-30px">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary">Yes</button>
</div>
</div>
</div>
</div>
I am building a table based on data returned from my API.
For each row in the table I would like to create a bootstrap modal with additional info in it.
This is how I do it right now. I created a designated div and I put all the modals inside it. Please note that in addition the modal's HTML is pretty big by itself:
let modal = `<div id="modal-${i}">big HTML here</div>`;
$("#modalsCollector").append(modal);
And this is how my table row looks like:
<tr data-toggle="modal" data-target="#modal-${i}">
Because I sometimes have 500+ table rows there is eventually a huge div (#modalsCollector) full of same (by structure) modals. I feel that it affects page performance.
Is there a better, more elegant and performance optimized way to bind modals to table rows? Or in general, working with many hidden elements instead of pushing them into the DOM that way?
You can include only one "null" modal in your <body>, like this:
<div id="myModal" class="modal fade" 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"></div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Then when you have to show the modal generate it using jQuery like this:
$("#button").click(function(e){
$("#myModal .modal-header").append(HTML for modal header here);
$("#myModal .modal-body").html(big HTML for modal body here);
$("#myModal").modal("show");
});
So, basically you change the modal header and the modal body of the same modal each time, with the needed information accordingly, without the need of like thousands of modals.
Bootstrap has a neat way of changing the components of the same modal. This is as long as you need the same modal just different content inside.
https://getbootstrap.com/docs/4.5/components/modal/#varying-modal-content
Here is an example:
HTML:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo">Open modal for #mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#fta">Open modal for #fat</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and jQuery:
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// Update the modal's content.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
I know this is the basic question, but I'm not able to solve this. Please do help me.
I'm trying to load the content of div on a click of a hyperlink into the bootstrap modal. How can I able to do this?
Below is my code :
<a id="myModalId" href="#">myLink1</a>
<a id="myModalId" href="#">myLink2</a>
my modal structure:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<div class="modal-body">
<!-- I would like my div content here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and here's my div structure:
<div>
<div id="d1" style="display:none">
div1 content
</div>
<div id="d2" style="display:none">
div 2 content
</div>
and modal calling function:
$(document).ready(function(){
$('#myModalId').click(function(){
$('#myModal').modal('show');
});
});
.
There are few such links and for each link I wold like to load a separate div using only single modal.
Can we do this ?
U can use this function to load content in order by the clicked button link:
Buttons:
myLink1
myLink2
Modal:
<div class="modal fade" id="myModalId" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<div class="modal-body">
<div id="d1" class="display-none">
div1 content
</div>
<div id="d2" class="display-none">
div 2 content
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Jquery:
$('#myModalId').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget), // here is the button clicked
content = button.data('content'), // here you can get information of the button
modal = $(this); // Here is the modal
modal.find('#'+content).slideDown('fast');
});
CSS:
.display-none{
display: none;
}
You can review this method in the boostrap documentation here: http://getbootstrap.com/javascript/#modals-related-target
Regards!
hi every one now i am working on Iframe the problem is the iframe doesn't close completely,while reloading the page iframe is running on the background and i am unable to access the pages after reloading its because of iframe button which makes me trouble in accessing the page.
i have attached my iframe code below suggest me the possible solutions.
<div class="top" onclick="removeIFrame();"></div>
<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">New Message</h4>
</div>
<div class="modal-body">
<iframe id="templatesrc" name="templatesrc" src="?do=manualupgrade&id=<AJDF:output>$smarty.get.id</AJDF:output>" width="690" height="400" frameborder="0"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
In your page add the below code
<script>
function removeIFrame(){
document.getElementById("templatesrc").remove();
}
</script>
This will completely remove iframe.
Just now I am working on print function using JavaScript to print the content of my website. I can print the content of my site fine with just a direct content. But the problem is that printing the content with bootstrap modal popup seems to be different from what I have done. Below is the printing code of normal content I have implemented.
HTML:
<div id="printArea">
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="mSchedule" class="modal fade">
<div class="modal-dialog">
<div class="modal-content" style="width: 1000px;" >
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<button type="button" id="printer" class="btn btn-info">Print</button>
<h4 class="modal-title">Repayment Schedule</h4>
</div>
<div class="modal-body" id ="schedule-table">
</div>
</div>
</div>
</div>
</div>
JS:
$(document).ready(function(){
$(document).on('click', '#printer', function (event) {
event.preventDefault();
var $print = $("#printArea");
$(document.body).wrapInner('<div style="display: none"></div>');
var $div = $('<div />').append($print.clone().contents()).appendTo(document.body);
window.print();
$div.remove();
$(document.body).children().contents().unwrap();
});
});
I know that this code is working fine with printing normal content, But I have no idea how to print a bootstrap popup modal.
Any help really appreciate.