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.
Related
I have cards that shows the name, description,price and an image, this works but when I press more info I basiclly want to show the same stuff but with more info but the modal doesn't want to show the image, pretty new to vue and such so I have no clue what's wrong:
<div class="container" id="app">
<div class="row justify-content-center mt-5">
<div class="card mr-5 mb-5" v-for="product in products" v-bind:key="product.id">
<div class="card-body">
<img v-bind:src="product.image" style="height:15rem">
<h5 class="card-title">{{ product.name }}</h5>
<p class="card-text">{{ product.description }}</p>
<p class="card-text"><b>Price: {{ product.price }}</b></p>
<button type="button" class="btn btn-primary" data-toggle="modal"
v-on:click="showProductInUpdateForm(product.id)">More Info</button>
</div>
</div>
</div>
<div class="modal fade" id="updateModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">More Info</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="formUpdate">
<img v-bind:src="product.image">
<div class="form-group">
<label for="Id">ID</label>
<input type="text" class="form-control" name="updateId" id="updateId" readonly>
</div>
<div class="form-group">
<label for="Name">Name</label>
<input type="text" class="form-control" name="updateName" id="updateName" readonly>
</div>
<div class="form-group">
<label for="Description">Description</label>
<input type="text" class="form-control" name="updateDescription" id="updateDescription" readonly>
</div>
<div class="form-group">
<label for="Price">Price</label>
<input type="text" class="form-control" name="updatePrice" id="updatePrice" readonly>
</div>
<div class="form-group">
<label for="Image">Image</label>
<input type="text" class="form-control" name="updateImage" id="updateImage" readonly>
</div>
<div class="form-group">
<button type="submit" class="btn btn-danger float-right" data-dismiss="modal">Close</button>
<button type="button" class="add-to-cart btn btn-primary float-right" data-dismiss="modal">Add to cart</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
You are declaring variable product in a v-for loop. So product can be only accessed inside that loop block.
<div v-for="product in products" v-bind:key="product.id">
{{product}}
</div>
...
<!-- product is 'undefined' here since it's outside of the v-for loop block -->
<img v-bind:src="product.image">
You can store selected item in some global property that can be accessed from everywhere:
<button v-on:click="showProductInUpdateForm(product)">More Info</button>
...
<img v-bind:src="selectedItem.image">
data {
return {
selectedItem: {}
}
},
methods: {
showProductInUpdateForm (product) {
this.selectedItem = product
...
}
}
When i push button open popup window, but this window work not correctly. I cant fill all lines and page footer climbs on the window popup
how fix it?
i use only bootstrap and i dont see any z-index
i have PartialView but i think that is view broke
this is view
#{
ViewData[index: "Title"] = "Create";
}
<h3>Create Employee</h3>
<hr/>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addEmployeeLabel">Add Employee</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form asp-action="Create">
<input name="IsValid" type="hidden" value="#ViewData.ModelState.IsValid.ToString()"/>
<div class="form-group">
<label asp-for="FistName"></label>
<input asp-for="FistName" class="form-control"/>
<span asp-validation-for="FistName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="LastName"></label>
<input asp-for="LastName" class="form-control"/>
<span asp-validation-for="LastName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Position" class="control-label"></label>
#Html.DropDownList("PositionId", (IEnumerable<SelectListItem>) ViewData["PositionId"], "- Select -", new {id = "PositionId"})
<span asp-validation-for="Position" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Salary"></label>
<input asp-for="Salary" class="form-control"/>
<span asp-validation-for="Salary" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="DateStart"></label>
<input asp-for="DateStart" class="form-control"/>
<span asp-validation-for="DateStart" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="DateEnd"></label>
<input asp-for="DateEnd" class="form-control"/>
<span asp-validation-for="DateEnd" class="text-danger"></span>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-save="modal" id="save-employee">Save</button>
</div>
</div>
</div>
if need i can uploaded this progect to google disk.
That is because you create a modal in a separate razor view,it would use Layout by default.
Add the following code to your bootstrap modal and no need to add html outside the modal:
#{
Layout = null;
}
#*<h3>Create Employee</h3>
<hr />*#
its simple fix html bootstrapping. i transferred next code before </form>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-save="modal" id="save-employee">Save</button>
</div>```
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 want that when I move my cursor on an image, it should show 3 buttons coming and then when I click on any one of them, a modal should open. I am actually done with this, but the problem is when I click on any of the buttons appearing, a modal is reflected and as soon as I try to close that modal, those three options are shown on that image rather dis-appearing. Please anyone help.
Here is the code:
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<div class="caption">
<button class="btn" data-toggle="modal" data-target="#myModal1a" style="color:#000">Add</button>
<button class="btn" data-toggle="modal" data-target="#myModal1b" style="color:#000">Delete</button>
<button class="btn" data-toggle="modal" data-target="#myModal1c" style="color:#000">Modify</button>
</div>
<img src="Department.png" style="position:fixed" alt="ALT NAME" width="250" height="60">
</div>
<h3 class="text" id="D1"><b>Department Options </b></h3>
</div>
</div>
<!-- Modal 1a -->
<div class="modal fade" id="myModal1a" 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><span class="glyphicon glyphicon-lock"></span> Create Department</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="psw">Department Name</label>
<input type="text" class="form-control" id="psw" placeholder="Provide a name">
</div>
<div class="form-group">
<label for="usrname">Department ID</label>
<input type="text" class="form-control" id="usrname" placeholder="Provide an ID">
</div>
<button type="submit" class="btn btn-block">Submit
<span class="glyphicon glyphicon-ok"></span>
</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> Cancel
</button>
<p>Need help?</p>
</div>
</div>
</div>
</div>
If you simply wanna hide those buttons whenever the modal is closed, then its a cakewalk if you use jQuery. You just need to use the hidden.bs.modal event of Bootstrap modals in the following way:
$('#myModal1a').on('hidden.bs.modal', function () {
$('.imgButton').each(function () {
$(this).hide();
})
})
Assuming that you provide a class called 'imgButton' to all the buttons :)
I have the following modal and when user clicks on Submit, I want to redirect to another page.
My HTML Code:
<!-- Modal -->
<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" aria-hidden="true">×</button>
<h4 class="modal-title">Add new card</h4>
</div>
<form action="addCard" method="post" id="addcard" class="form-horizontal" role="form">
<div class="modal-body" style="height: 190px;">
<div class="form-group" style="height: 30px;">
<label for="title" class="col-md-3 control-label">Title</label>
<div class="col-md-9">
<input type="text" class="form-control" name="title" placeholder="Enter Card title here...">
</div>
</div>
<div class="form-group" style="height: 30px; margin-bottom:30px;">
<label for="title" class="col-md-3 control-label">Description</label>
<div class="col-md-9">
<textarea class="form-control" name="desc" placeholder="Enter Card description here..."></textarea>
</div>
</div>
<div class="form-group">
<label for="priority" class="col-md-3 control-label">Priority</label>
<div class="col-md-9">
<select name="priority" class="form-control">
<option value="critical">Critical</option>
<option value="high">High</option>
<option value="normal">Normal</option>
<option value="low">Low</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="formSubmit" type="submit">Submit</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
app.js:
app.post('/addCard', routes.addCard);
index.js:
exports.addCard = function (req,res)
{
res.render('index');
}
When I click on 'Submit' button of the modal, no action is happening. Please advice. Thanks.
in
<button type="button" class="btn btn-primary" id="formSubmit" type="submit">Submit</button>
you have type=button ,and then type=submit
remove type=button