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>
Related
I want to call (click)="basicModal.hide()" methode of MDBootstrap Modal inside one of my fuctions in my typescript component. I don't know how to access this method from component.
<button type="button" mdbBtn color="primary" class="relative waves-light" (click)="basicModal.show()" mdbWavesEffect>Launch demo modal</button>
<div mdbModal #basicModal="mdbModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close" (click)="basicModal.hide()" mdbWavesEffect>Close</button>
<button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>Save changes</button>
</div>
</div>
</div>
</div>
You have to use the Angular's #ViewChild decorator to target the mdbModal directrive, and then use the hide() method from ModalDirective class.
Please take a look at the below code, there's explained everything:
.html:
<button type="button" mdbBtn color="primary" class="relative waves-light" (click)="basicModal.show()" mdbWavesEffect>Launch demo modal</button>
<div #modal mdbModal #basicModal="mdbModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="md-form">
<input type="text" class="form-control" id="input1" mdbInput>
<label for="input1">Modal input</label>
</div>
</div>
<div class="modal-footer">
<button mdbBtn color="primary" mdbWavesEffect (click)="hideModal()">Hide modal</button>
</div>
</div>
</div>
</div>
.ts:
#ViewChild(ModalDirective) modal: ModalDirective;
hideModal() {
this.modal.hide();
}
If there will be something unclear, feel free to ask again!
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 am trying to open a remote modal window using Bootstrap. The page that opens the modal has the following code.
<a class="test" href="" data-toggle="modal" data-target="#myModal">Test</a>
<div class="modal-container"></div>
<script type="text/javascript">
$(document).ready(function () {
$('.test').click(function () {
$('.modal-container').load(url, function (result) {
$('#myModal').modal('show');
});
});
});
</script>
The remote page has the following code
<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">
... remote
</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>
</div>
The problem that I have is that the first time the modal is called remotely it opens and closes normally but if I want to open it again, it does not close. If the modal (same code) is defined locally it works fine.
Please help
I think that you must close the first div and change role attribute on
<div class="modal-dialog">
try it!
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<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">
... remote
</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>
</div>
</div>
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');
});