I have a modal window containing the 'close' button, I need to close the browser once i click on the close button. how do i achieve using angular js.
I tried using $window service but no luck.
<div class="modal" id="alertModal" data-keyboard="true" role="dialog" tabindex="-1">
<div class="modal-dialog text-left" style="width:40%">
<div class="modal-content">
<div class="modal-header">
<h3>{{title}}</h3>
</div>
<div class="modal-body">
<div class="alert-danger" style="padding:10px; font-size:13px"><span ng-bind-html="content"></span></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="closeBrowser();">Close</button>
</div>
</div>
</div>
</div>
controller
$scope.closeBrowser = function(){
$window.close();
}
try this:
function closeWindow() {
window.open('','_parent','');
window.close();
}
Related
I have a requirement as, Creating a one form and load this form on multiple screen as modal using bootstrap.
Example : Suppose I am having 3 jsp pages i.e. Index.jsp, Request.JSP, Form.jsp
Now I have a link on Index.jsp which will display Form.jsp as Modal and I have button on Request.jsp, on click of button Form.jsp will get displayed as modal.
I have gone through multiple queries but solution was not satisfactory. I dont want to repeat the code and want to use Modal.
Thanks in advance.
i got the solution. I kept the Modal and Modal-dialog class div tags in main JSP like below :
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Cash Request Form</h4>
</div>
<div id="loadModalBody" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Then I added the form with modal-body class in second JSP CashRequestForm.jsp :
<div class="modal-body panel">
<div class="panel panel-body" id="panelActTypeAndDate">
<div class="row">
<div class="col-md-8"><font>Activity Type</font></div>
<div class="col-md-3"><font>Select Activity Date</font></div>
</div>
<div id="row1" class="row">
.....
.....
Your code
</div>
</div>
</div>
Then I called .load using jquery as below :
$(".popUp").click(function () {
$("#loadModalBody").load("CashRequestForm.jsp");
});
And it worked for me.
The bellow modal is inside a ng-controller="myController as SignupCtrl"
<div id="modalSignup" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" ng-click="SignupCtrl.resetForm()">
X
</button>
</div>
<div class="modal-body">
<form name="formSignup" novalidate>
<button type="submit" ng-click="LoginCtrl.signup();">
submit
</button>
</form>
</div>
</div>
</div>
</div>
I'm also using ui-router in my project.
How do I write the controller to close the modal and change state after success on LoginCtrl.signup() ?
You have to use Bootstrap's JS methods to close the modal manually.
But you are mixing jQuery and AngularJS. You should use a 3rd party library to do this.
See UI Bootstrap.
Reset the values on Modal box on reload
<div class="modal fade" id="detailsModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header custom-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">
Create Job Vaccination
</h4>
</div>
<!-- Modal Body -->
<form name="vaccjobctrl.vaccineForm" class="form-inline" >
<div class="modal-body" style="height: 150px">
<div class="row ">
<div class="form-group col-md-12" ng-class="{ 'has-error' : vaccjobctrl.vaccineForm.screeningType.$invalid && (vaccjobctrl.vaccineForm.screeningType.$dirty || vaccjobctrl.vaccineForm.screeningType.$touched) }">
<label for="regId" class="col-md-6">Screening Type:</label>
<span class="col-md-6">
<select style="width: 100%;"
ng-model="vaccjobctrl.vaccineForm.screeningTypeMast.screeningTypeId"
ng-options="sctype.screeningTypeId as sctype.screeningType for sctype in vaccjobctrl.screeningTypeList"
class="form-control field-size ng-pristine ng-invalid ng-invalid-required ng-valid-maxlength ng-touched" name="screeningType"
id="screeningType" required>
<option value="">--SELECT--</option>
<option value="{{sctype.screeningTypeId}}">{{sctype.screeningType}}</option>
</select>
</span>
<div class="col-sm-6 error-color"
ng-if="vaccjobctrl.interacted(vaccjobctrl.vaccineForm.screeningType)"
ng-messages="vaccjobctrl.vaccineForm.screeningType.$error">
<div ng-messages-include="src/common/validation-messages.html"></div>
</div>
</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Cancel
</button>
<button type="button" class="btn btn-primary-joli" ng-click="vaccjobctrl.saveJobVaccination(vaccjobctrl.vacc);" ng-disabled="vaccjobctrl.vaccineForm.$invalid" data-dismiss="modal">
Create Vaccination
</button>
</div>
</form>
</div>
</div>
</div>
this is the modal box.
On click on open Modal this function will be called
vm.showModal = function() {
$('#detailsModal').modal('show');
};
values in the select box are pre-populated, on reopening the modal box it show the previously selected values. If trying to clear that the the select box border color changed to red on reopen.
In Bootstrap 3 you can reset your form after your modal window has been closed as follows:
$('.modal').on('hidden.bs.modal', function(){
$(this).find('form')[0].reset();
});
You can just reset any content manually when modal is hidden.
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch modal
</button>
<div class="modal fade" id="myModal" 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">Modal title</h4>
</div>
<div class="modal-body">
<div class='modal-body1'>
<h3>Close and open, I will be gone!</h3>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You can use:
$(".modal").on("hidden.bs.modal", function(){
$(".modal-body1").html("");
});
You can do more like:
$(document).ready(function() {
$(".modal").on("hidden.bs.modal", function() {
$(".modal-body1").html("Where did he go?!?!?!");
});
});
There are more about them in http://getbootstrap.com/javascript/#modals-usage.
UPDATE AS PER YOUR NEED:
If you want to do it angular way, use the jquery src above angularjs source in index.html. You can simply use the jquery functions inside the angularjs controller.
Working JsFiddle: http://jsfiddle.net/tnq86/15/
For using document.ready function in angular.
angular.module('MyApp', [])
.controller('MyCtrl', [function() {
angular.element(document).ready(function () {
document.getElementById('msg').innerHTML = 'Hello';
});
}]);
However Creating directive is the right way to do it. Follow the link to get some help with creating directive to execute jquery functions in angularjs.
jquery in angularjs using directive
I have a functional angular-strap aside with a custom template.
In my template are anchor tags. When you click one of these tags, it closes the aside.
How can I prevent the aside from closing?
Thanks!
Here is my template:
<script type="text/ng-template" id="chart-edit-aside">
<div class="aside" tabindex="-1" role="dialog">
<div class="aside-dialog">
<div class="aside-content">
<div class="aside-header" ng-show="title">
<button type="button" class="close" ng-click="$hide()">×</button>
<h4 class="aside-title" ng-bind="title"></h4>
</div>
<div class="aside-body">
<div ng-repeat="chart in availablecharts">
<a ng-click="loadChartPreview(chart);" href>{{chart.metric_label}}</a>
</div>
</div>
<div class="aside-footer">
<button type="button" class="btn btn-primary-mp" ng-click="saveChart()">Save</button>
<button type="button" class="btn btn-secondary-mp" ng-click="$hide()">Cancel</button>
</div>
</div>
</div>
</div>
Turns out my function call on the click event was causing it, when I commented out the body of that func, the aside did not close. So this is not an issue with aside.
I am using rails to build my app. Tried to popup a modal box with angularstrap http://mgcrea.github.io/angular-strap/#/modal they are giving example of using modal box with partials.But I want to call a div from same page.they mention something with ng-template.But I didn't get any documentation for that. Anybody know about this??
You can read about ng-template here in the AngularJS docs. Implement it as follows:
<script type="text/ng-template" id="modal-template.html">
<div>Content of Modal</div>
</script>
Then where you're calling the modal, replace the reference to the partial with modal-template.html:
<button data-toggle="modal" bs-modal="'modal-template.html'">Call to Action</button>
In the main html page define your TemplageCache as follows:
<script type="text/ng-template" class="modal" id="/myTmpl.html">
<div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-label="Close" ng-click="$hide()">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">This title</h4>
</div>
<div class="modal-body">
This is content
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
</div>
</div>
</div>
</div>
</script>
Then in javascript
$scope.showMyModal=function(){
var myModal = $modal({placement:'center', animation:"am-fade-and-scale", templateUrl:'/myTmpl.html', show: true});
}
An ng-template would be if you had a inline (html string in javascript) variable. For example:
var t = "<div></div>";
t could be your ng-template.
Unforunately I don't know how to do what you are looking for.