I am trying to make the Bootstrap Modal be accessible to screen readers. This means I need to add a role="dialog" or similar to the highest level div of the modal.
My problem is that I can't add anything to the correct level divs as they are generated.
This code adds the role="dialog" to the 2nd highest div of the modal.
<div class="modal-content" role="dialog">
<div class="modal-header">
<div class="alert alert-warning">
<strong>Warning!</strong> Are you sure you want to clear all responses in this section?
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" ng-click="ok()" role="button" aria-label="Confirm clearing of the entire section">Ok</button>
<button class="btn btn-default" ng-click="cancel()" role="button" aria-label="Deny clearing of the entire section">Cancel</button>
</div>
</div>
I would like to have the role on the shown div, but that one and the parent are generated and I don't have control over them.
I am showing the modal via
$scope.clearSection = function () {
var modal = $modal.open({
controller: clearSectionController,
templateUrl: 'Engine/Views/ClearSectionModal.html'
});
...
}
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.
I am working on a script where a modal opens up only after the output from python file says dup_yes is 1
I have the modal as following:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#dupModal" data-keyboard="false" data-backdrop="static" ng-click="save_me()" >Save Me</button>
<div class="modal fade" id="dupModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-alert">Same name already exists</h3>
<h6 class="modal-ask">Save both entries or do you want to cancel?</h6>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true" >Keep Both</button>
<button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true" >Close</button>
</div>
</div>
</div>
</div>
and my script is as follows:
$scope.save_me = function () {
http.get("path to python file").then(function(response){
$scope.check=response.data;
if ($scope.check['login_status'] == 1 ){
console.log("Mission is a Success\n");
$scope.dup_yes=1;
}
})
}
When I click on button it opens up the modal and runs the python file simultaneously.
Instead I want it to open up the modal only when my python script gives the value 1.
Any ideas on how to do this?
You can access the modal from the controller and open it like this:
$scope.save_me = function () {
http.get("path to python file").then(function(response){
$scope.check=response.data;
if ($scope.check['login_status'] == 1 ){
console.log("Mission is a Success\n");
$scope.dup_yes=1;
var modal = angular.element('#dupModal');
//modal.modal('hide');
modal.modal('show');
}
})
}
Mayby a better solution is to handle the modal action in a separete controller and inject that into your current controller to keep the responsibilities separate
I'm using this modal service to show a basic dialog in an Angular app.
The implementation is simple but there are two issues:
The dialog shows but the modal-backdrop class is repeated multiple times, rendering it completely black.
When closing the dialog, the form closes but the background remains, leaving the view useless. I'm sure this is related to 1.
I'm using Angular 1.4.9 with angular-ui-bootstrap 0.13.4 [2015-09-03]. I've found a couple of posts showing incompatibilities between angular 1.4 and angular-ui-bootstrap but I've not managed to solve this.
Edit - view and controller code:
<button type="button" class="btn btn-sm btn-white" ng-click="procFileCtrl.viewErrors(file)"> <i class="fa fa-eye"></i> </button>
this.viewErrors = function(file) {
ModalService.showModal({
templateUrl: 'modules/components/client/modal/modal-base.html',
controller: 'FileController',
controllerAs: 'fileCtrl',
inputs: {
data: file
}
}).then(function(modal) {
modal.element.modal();
modal.close.then(function(result) {
this.message = result ? 'ok' : 'notok';
});
}).catch(function(error) {
console.log(error);
});
};
modal-base.html
<div class="modal inmodal in" id="myModal" tabindex="-1" role="dialog" aria-hidden="true" style="display: block;">
<div class="modal-dialog">
<div class="modal-content animated bounceInRight">
<div class="modal-header">
<!-- header here -->
</div>
<div class="modal-body">
<!-- body here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
I am using Mobile Angular UI.
In parent window there is list of category names. I want selected category name should get updated from modal. I am able to display modal. I want to pass selected category item from parent view to modal.
My code in parent view
<div ng-controller="CategoryController as TitleCats">
<div ng-repeat="cats in TitleCats.categories">
<a href=""
ui-turn-on="titleCatUpdatemodal"
class="btn btn-default" ng-click="TitleCats.openUpdateModel(cats)"> {{cats.name}} --> Edit</a>
</div>
<div ui-content-for="modals">
<div ng-include="'pages/titleCatUpdatemodal.html'"></div>
</div>
</div>
My Modal is
<div class="modal" ui-if='titleCatUpdatemodal' ui-state='titleCatUpdatemodal'>
<div class="modal-backdrop in"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close"
ui-turn-off="titleCatUpdatemodal">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p><input type="text" ng-model="cats.name" >{{ cats.name }}</p>
</div>
<div class="modal-footer">
<button ui-turn-off="titleCatUpdatemodal" class="btn btn-default">Close</button>
<button ui-turn-off="titleCatUpdatemodal" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
When i click button it opens modal but no value!
Anyone please let me know how to get value in modal. Thanks in advance.
In your controller. you should have something similar to this:
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'templates/myModal.html',
controller: 'myModalCtrl',
resolve: {
myData: function () {
//do stuff
return stuff;
}
}
});
Inside that resolve, you can fill out the function which should then be accessible in your modals controller
I'm starting with AngularJS and I'm having some issues with routes.
I configured my project for html5mode, I set my tag, and everything was ok.
The problem comes when I try to use a bootstrap modal. The link that fires the modal is:
<a data-toggle="modal" href="#upload-files" >Upload files</a>
The modal code is:
<div class="modal hidden" id="upload-memories">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Upload memories</h4>
</div>
<div class="modal-body">
asdadsd
</div>
<div class="modal-footer">
Close
</div>
</div>
</div>
</div>
So the href in the anchor references the modal's id, not a route. But my application is going to home page (because the 'otherwise' I suppose).
Can I say AngularJS to ignore this? or is there a better solution?.
Thank you very much!