I have attached my popup box code here. The close button here is not working. Im totally new to angular 6. Can anyone help me with this?
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">selection</h4>
</div>
<form>
<!-- Modal body -->
<div class="modal-body">
<h5>Enter value:</h5>
<div class="form-group">
<input name="Id" type="text" class="form-control shadow-sm" placeholder="Enter value">
</div>
<div class="form-group">
<input name="name" type="text" class="form-control shadow-sm" placeholder="Enter name">
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-cancel shadow-sm" data-dismiss="modal">CLOSE</button>
<button type="submit" class="btn btn-submit shadow-sm">SUBMIT</button>
</div>
Try this:
import { DataModalComponent } from './patient-modal/patient-modal.component';
import { NgbModal, NgbModalOptions } from '#ng-bootstrap/ng-bootstrap';
let ngbModalOptions: NgbModalOptions = {
backdrop : 'static',
keyboard : false,
size: "lg"
};
const modalRef = this.modalService.open(DataModalComponent ,ngbModalOptions);
Related
I have two modals. I'm trying to make the "Novo Avatar" button close its modal, which is #modal_debug, and then open the modal #modal_newAvatar. The problem is it doesn't close the modal, and instead just opens the new one on top.
I've even tried to copy paste this example from the BS docs, which supposedly does the same I'm trying to achieve
https://getbootstrap.com/docs/5.0/components/modal/#toggle-between-modals
But the exact same happens. Is it something wrong with my version of bootstrap? I'm using 5.1.0.
<!-- Modal "Painel de Debug" -->
<div class="modal fade" id="modal_debug" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2>Painel de Debug</h2>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<button type="button" class="btn btn-primary" data-bs-target="#modal_newAvatar" data-bs-toggle="modal" data-bs-dismiss="modal">Novo Avatar</button>
<button type="button" class="btn btn-primary" data-bs-target="#modal_selAvatar" data-bs-toggle="modal" data-bs-dismiss="modal">Selecionar Avatar</button>
<button type="button" class="btn btn-primary" data-bs-target="#modal_delAvatar" data-bs-toggle="modal" data-bs-dismiss="modal">Remover Avatar</button>
</div>
</div>
</div>
</div>
<!-- Modal "Novo Avatar" -->
<div class="modal fade" id="modal_newAvatar" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5>Novo Avatar</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form id="form_newAvatar" autocomplete="off">
<label for="input_newAvatar_sceneKey">Cena de Jogo</label><br>
<input type="text" id="input_newAvatar_sceneKey" name="sceneKey" value="main-room" required><br><br>
<label for="input_newAvatar_name">Nome</label><br>
<input type="text" id="input_newAvatar_name" name="name" required><br><br>
<label for="input_newAvatar_x">x</label><br>
<input type="number" id="input_newAvatar_x" name="x" required><br><br>
<label for="input_newAvatar_y">y</label><br>
<input type="number" id="input_newAvatar_y" name="y" required>
</form>
</div>
<div class="modal-footer">
<button type="submit" form="form_newAvatar" class="btn btn-primary">Confirmar</button>
</div>
</div>
</div>
</div>
Had the same problem as you, use this solution: https://stackoverflow.com/a/58553800
It involves JavaScript, modify it to suit your needs.
<script>
//When clicking the first button this function
//hides the first modal and then shows the second modal
$(function () {
$('#firstModalButtonID').on('click', function () {
$('#firstModalID').modal('hide');
$('#secondModalID').modal('show');
})
})
//When clicking the second button this function
//hides the second modal and then shows the first modal
$(function () {
$('#secondModalButtonID').on('click', function () {
$('#secondModalID').modal('hide');
$('#firstModalID').modal('show');
})
})
I have a modal that closes when I click on certain areas of it. This is mostly around the top, bottom and sides.
This is my modal:
<modal data-backdrop="static" id="editAcc">
<div class="modal" style="height:90%; width: 500px; max-height: 1000px; align-self: center">
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title" >Edit Account</h4>
<button type="button" class="close" aria-label="Close" (click)="closeModal('editAcc')">
<span aria-hidden="true">×</span>
</button>
</div>
<div *ngIf="isModalError" class="alert alert-danger angular-with-newlines">
<button class="close" type="button" data-dismiss="alert" (click)='closeAlert()'>×</button>
ERROR: {{errorMessage.error.message}}</div>
<div class="modal-body" style="width: 500px" >
<form (ngSubmit)="onSubmit()">
<div class="form-group">
<div class="dropdown">
<label>Choose Client: </label>
<select (change)="onChange($event)" [(ngModel)]="newAccount.client" name="client" id="client">
<option class="dropdown-item" *ngFor="let item of clients" [value]="item" >{{item}}</option>
</select>
</div>
<br>
<div class="input-group">
<label for="LoadCps">Load Cps: </label>
<input type="number" id="loadCps" name="loadCps" maxlength=1 [(ngModel)]="newAccount.loadCps">
<div class="input-group-append"></div>
</div>
<br>
<div class="input-group">
<label for="STPFlag">STP Flag: </label>
<input type="number" id="STPFlag" name="STPFlag" maxlength=1 [(ngModel)]="newAccount.STPFlag">
<div class="input-group-append"></div>
</div>
<br>
<div class="modal-footer">
<button type="submit" class="btn btn-outline-dark" >Save</button>
</div>
</form>
</div>
</div>
<div *ngIf="isOpen" class="modal-background"></div>
</modal>
Here are my open/close functions:
openModal(id: string) {
this.modalService.open(id);
this.isOpen = true;
}
closeModal(id: string) {
this.modalService.close(id);
this.isOpen = false;
}
I have tried changing data-backdrop="static" to "true" and it hasnt worked out for me
The Angular-Powered bootstrap library gives you a Modal component that you should use. It allows you to set backdrop static option like this.
const modalRef = this.modalService.open(MyModalComponent, { backdrop: 'static' });
Thanks.
we used data-dismiss in html form it's working fine. but the modal close every time when click submit button weather form is valid or invalid
Html code
<form #AddAirlineuser="ngForm">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">CREATE PROFILE</h4>
</div>
<div class="modal-body">
<label>Name</label>
<p><input type="text" name="name" class="form-control" aria-label="..." ngModel></p>
<label>Email</label>
<p><input type="text" name="email" class="form-control" aria-label="..." ngModel></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Delete</button>
<button type="submit" class="btn btn-primary" (click) = "Btn_AddNewAirline(AddAirlineuser.valid,AddAirlineuser.value)">Submit</button>
</div>
</form>
TypeScript code
Btn_AddNewAirline(formstatus: any,data:any){
let AirlineData: any = {
name: data.name,
email: data.email
};
if(formstatus){
// TODO code form status is valid
}
}
I need to show the values given in modal at outside the modal using AngularJS. Plunker attached here which clearly explains. Can anyone help me out........I have already checked Angular, Ui-Bootstrap site, but couldn't find the solution to the problem
HTML
<div ng-controller="ModalDemoCtrl as $ctrl" class="modal-demo">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true" ng-click="$ctrl.cancel()">×</button><a>
<h3 class="modal-title" id="modal-title" style="color:red">Please Provide the Details Here</h3>
</a>
</div>
<form name="modalForm" novalidate>
<div class="modal-body">
<div class="form-group" ng-class="{ 'has-error': modalForm.name.$invalid }"> <!--modalForm.name.$touched &&-->
<a>*Name: </a><input name="name" ng-minlength="3"
ng-maxlength="8" ng-model="name" type="text" placeholder="Name" class="form-control" size="10" style="width: 50%" required />
</div>
<div class="form-group" ng-controller="ButtonsCtrl">
<a>*Gender: </a><pre>{{radioModel || 'null'}}</pre>
<div class="btn-group">
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Male'" uncheckable>Male</label>
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Female'" uncheckable>Female</label>
</div>
</div>
<div class="input-group" ng-controller="DatepickerPopupDemoCtrl">
<a>*Birth Date: Selected date is: <em>{{dt | date:'fullDate' }}</em></a><select class="form-control" ng-model="format" ng-options="f for f in formats" style="width: 50%"><option></option></select><input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" close-text="Close" ng-required="true" alt-input-formats="altInputFormats" style="width: 50%" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
<p ng-show="modalForm.modalPlace.$error.required">Select service</p>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button" ng-click="$ctrl.ok()" ng-disabled="modalForm.$invalid">OK</button>
<button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
</div>
</form>
</script>
<button type="button" class="btn btn-default" ng-click="$ctrl.open()">Open me!</button>
<div ng-show="$ctrl.selected">Name from the modal: {{ $ctrl.name }}</div>
<div ng-show="$ctrl.selected">Gender from the modal: {{ radioModel || 'null'}}</div>
<div ng-show="$ctrl.selected">DOB from the modal: {{ dt | date:'fullDate' }}</div>
What you are looking for is the modalInstance.result property, it a promise which is resolved with a value when you close your modal (or rejects when you dismiss it).
The docs already provide you with a simple example
modalInstance.result.then(function (selectedItem) {
$ctrl.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
Inside your modal controller you can close/dismiss the modal using these methods
var selectedItem = ...
$uibModalInstance.close(selectedItem)
// or
$uibModalInstance.dismiss(selectedItem)
With selectedItem being passes to the controller that launched the modal.
Because you code is incomplete I can't really help you much more then that, the docs hold all you need to know really.
I have the following Bootstrap markup:
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="username">Username</label>
<div class="col-md-4">
<input id="username" name="username" type="text" placeholder="" class="form-control input-md" required="" maxlength="8" value="">
</div>
</div>
<!-- Button (Double) -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-8">
<button id="submit" name="submit" class="btn btn-primary" value="1">Create Profile</button>
<button id="cancel" name="cancel" class="btn btn-default" value="1">Cancel</button>
</div>
</div>
When I click the Create Profile button the form works fine letting me know that certain fields are "Required". But when I click the Cancel button I cannot leave the form due to incomplete required fields.
Is there a form cancel button capability in Bootstrap?
Change your code to the following:
<!-- Button (Double) -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-8">
<button id="submit" name="submit" class="btn btn-primary" value="1">Create Profile</button>
Cancel
</div>
</div>
simply set the type attribute to reset as shown below;
<button type="reset" class="btn btn-default pull-right">Cancel</button>
if you would like to keep both elements as <button>. You can create a click handler with jQuery:
$('#cancel').click(() => {
location.href = '../' //returns to parent
})
A direct method is to use onclick="history.back()" Like so:
<button id="cancel" name="cancel" class="btn btn-default" onclick="history.back()">Cancel</button>
It is supported in all browsers at the time of this posting