{% for key,value in config.items %}
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target='#'{{key}}><i class="fa fa-pencil-square-o" aria-hidden="true"></i></button>
<div class="modal fade" id={{ key}} 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">{{key}}</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>
{% endfor %}
//I want to call each element by {{key}} so that I can display all the values based on the loop value.Please anyone suggest me how to fix this issue
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!
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 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 am having two Bootstrap modal. On returning back to previous modal from second modal it is not visible.Second modal has a file field. On changing the value of file field the second modal should hide and the first modal should be displayed. Can anyone help me out? Following is my try:
<html lang="en">
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal123" data-dismiss="modal">Open Modal</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal123" 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.123</p>
<form action="demo_form.asp">
Select a file: <input type="file" name="img" id="File">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
$("#File").change(function(){
$("#myModal123").hide();
$("#myModal").show();
alert("Hello");
})
</script>
</body>
</html>
Thank you in advance.
Please replace your JQuery code to below
$("#File").change(function () {
$("#myModal123").modal("hide");
$("#myModal").modal("show");
})
I've added bootstrap modal to my website, but it's not working. Someone help me fix it. Thanks.
<button type="button" class="btn btn-info btn-lg">Update</button>
<!-- Modal -->
<div class="modal fade" id="myupdate" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">New Update </h4>
</div>
<div class="modal-body">
<p>This is a small modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Missing your data-toggle and target
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myupdate">Open Small Modal</button>
You need to set data-target as target id of your modal and data-toggle = "modal" to the button on which you want to activate the modal
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button type="button" data-target="#myupdate" data-toggle="modal" class="btn btn-info btn-lg">Update</button>
<!-- Modal -->
<div class="modal fade" id="myupdate" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">New Update </h4>
</div>
<div class="modal-body">
<p>This is a small modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>