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.
Related
I want to change the close icon in bootstrap modal from × to <i class="fas fa-times-circle"></i> using FontAwesome, but when I do, the close button stops working and even if I click it it does not close the modal. FontAwesome is installed and I can see all the icons.
This works (default Bootstrap modal):
<div class="modal fade" id="<%= product.units[key].mini %>" tabindex="-1" role="dialog" aria-labelledby="ModalCenter" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content modal-view-model">
<div class="modal-header justify-content-center">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body pt-0">
<img src="model.png">
</div>
</div>
</div>
</div>
This doesn't:
<div class="modal fade" id="<%= product.units[key].mini %>" tabindex="-1" role="dialog" aria-labelledby="ModalCenter" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content modal-view-model">
<div class="modal-header justify-content-center">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fas fa-times-circle"></i></span>
</button>
</div>
<div class="modal-body pt-0">
<img src="model.png">
</div>
</div>
</div>
With the same hyper link, I want to open a waiting Modal (Boostrap 4) and when this is open, I want a redirection to the new page.
<a class="dropdown-item" asp-area="Config" asp-controller="GeneralSettings" asp-action="Index" data-toggle="modal" data-target="#waitModal">#Localizer["GeneralSettings"]</a>
<div class="modal" id="waitModal" tabindex="-1" role="dialog" aria-labelledby="waitModal" aria-hidden="true">
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addConfiguration">Please Wait ...</h5>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-12">
Description
</div>
</div>
<div class="row">
<div class="col-12">
<div class="text-center">
<img src="~/images/pleaseWait.gif" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Tank you for your help :)
It is not possible to do this, I guess what you need and $ (window) .load () on the destination page.
On the landing page open the "modal" first of all and then, by loading the page completely using $ (window) .load (), destroy the "modal"
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,
sample.html: In this page I had a button as below as
<button data-toggle="modal" class="btn btn-info" onclick="location.href='home.html'" data-target="#testModal">button</button>
on click on the above button open a modal named home.cfm and its content as below as
home.html:
<div id="testModal" 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>
<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>
but no modal is opening.please help
You have to just need to call a modal-contant data from the home.html file , so put below code in to your sample.html file.
<button class="btn btn-info" onclick="show_modal('home.html','Home page','')">button</button>
<div class="modal fade bs-modal-sm" id="modal" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog animated bounceIn">
<div class="modal-content">
</div>
</div>
</div>
Add one function in to the js file and add reference of that js file in to the sample.html.
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)});
}
Add below code in home.html file.
<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>
I hope this will help full to you.
I have 4 images in a row that I would like to use as modal buttons in Bootstrap.
How do I create a row of images that act as modals buttons in bootstrap?
In case you are using bootstrap 3 you can try the following:
HTML
<a href="#" id="modal">
<img id="myimg" src="http://www.yourdomain.com/assets/images/imgtoEnlarge.jpg" >
Click here to Enlarge
</a>
<!-- Creating the bootstrap modal where the image will show-->
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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>
<h4 class="modal-title" id="myModalLabel">Image preview</h4>
</div>
<div class="modal-body">
<img src="" id="imagepreview" style="width: 240px; height: 134px;" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JavaScript:
$("#modal").on("click", function() {
$('#imagepreview').attr('src', $('#myimg').attr('src'));
$('#imagemodal').modal('show');
});