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"
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>
I have a bootstrap modal on the screen. When the modal is showed, it is positioned on the center of the screen.
<div class="modal fade" id="ua_dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="modal-body">
....
</div>
</div>
I need to move the modal on my screen, because cover some information from my screen. The user should be able to move on the right, on the left...etc. Can I do that? there is some settings that I can use? or with js? what is the best way? Thanks!
I think You Need This :)
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div>
<div class="modal fade">
<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">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 -->
</div>
<script>
$('.modal').modal({ keyboard: false,
show: true
});
// Jquery draggable
$('.modal-dialog').draggable({
handle: ".modal-header"
});
</script>
.modal-content{
margin-top:50px !important;
}
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 created a modal in my form which has a bunch of images for the use to select. However i have no idea on how to select the image as in after I click on it , the modal would close and the image name be shown alongside the modal launch button. This is code I have for now:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Click to launch Image Gallery...
</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">
{% for image in images %}
<input type="image" src="{{ image.url }}" height="100" width="130" style="padding-right: 3px;padding-bottom: 3px;">
{% endfor %}
</div>
</div>
</div>
</div>
Add a class for image (just for identification and doing some trick)
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Click to launch Image Gallery...
</button>
<div id='div_img_name'> </div>
<!-- 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">
<!-- images added for example purpose-->
<input type="image" src="https://pbs.twimg.com/profile_images/638751551457103872/KN-NzuRl.png" height="100" width="130" style="padding-right: 3px;padding-bottom: 3px;" class="img">
<input type="image" src="https://pennyandjohninoz.files.wordpress.com/2011/10/icons-of-australia-3-sydney-opera-house.jpg" height="100" width="130" style="padding-right: 3px;padding-bottom: 3px;" class="img">
</div>
</div>
</div>
</div>
JavaScript to add
$(".img").click(function(){
$("#div_img_name").text($(this).attr('src'));
$('#myModal').modal('hide') ;
})
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');
});