<div class="modal fade in" id="acc-del-form" role="dialog" style="background: rgba(0, 0, 0, 0.55);" [ngStyle]="{'display':display}" data-keyboard="false" data-backdrop="false">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header" style="background: #05668D; color:#fff">
<button type="button" class="close" data-dismiss="modal" (click)="onCloseDeleteTagging()">×</button>
<h4 class="modal-title">Update!</h4>
</div>
<div class="modal-body">
<h5>Do you want to update tags</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-info btn-fill btn-sm" data-dismiss="modal" (click)="updateTaggingData()">Yes</button>
<button type="button" class="btn btn-default btn-warning btn-fill btn-sm" data-dismiss="modal" (click)="onCloseDeleteTagging()">No</button>
</div>
</div>
</div>
</div>
This is my above modal popup it closes when i click on onCloseDeleteTagging() method
onCloseDeleteTagging() {
this.display = 'none';
}
i want to close the modal pop to close when i click anywhere on the screen rather than clicking "X" button
<div class="pull-right" style="padding-top:15px;" [ngStyle]="{'display':TaggingUserDisplay}">
<button type="button" title= "Save Tags" class="btn btn-warning btn-fill btn-xs" id="save_btn" (click)= "updateTaggingDataPopup()" [ngStyle]="{'display': 'updateTagBoList.length !== 0 '}"><i class="fa fa-save"></i></button>
</div>
this is my code to open modal popup
updateTaggingDataPopup() {
this.display = "block";
}
can any one help me in closing the popup when i click anywhere on the screen.
You need to use #HostListener (HostListener Docs)
#HostListener('document:click', ['$event'])
clickOnDocument(event) {
if(SOME_TEST_DO_YOU_WANT_TO_MAKE_PROBABLY_WITH_THE_event_TARGET){
this.display = 'none';
}
}
Maybe this helps, it's made with vanilla JS.
document.addEventListener('click', (evt) => {
target = evt.target;
var modalContainer = document.getElementById('acc-del-form');
var modal = document.getElementById('modal_block');
if (target !== modal) {
modalContainer.style.display = "none"
}
})
When clicking anywhere outside the modal block it will remove the display attribute.
Related
I have a button with some validation function written in click event of jquery, which needs to trigger a modal window on successful validation.I have placed my modal trigger function within an IF condition which is not triggering my modal window. Can you please help me to find the issue and solve.
Note: when placing my modal trigger function on the very first line within the document.ready function the same modal window works, but not triggering when placed in click function.
Header and html code of modal
<head>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
</head>
<div id="submit_modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
jquery code for click function
$(".subdomain_check").click(function(){
var form = $("#msform");
form.validate();
if(form.valid() === true){
var doamin_check = $("#subdomain_input").val();
if (doamin_check == '' ) {
$("#subdomain_available").text("");
$("#subdomain_error").text("Please Enter a domain name");
return false;
}
else {
$("#submit_modal").modal('show'); // Modal triger function
$("#subdomain_error").text("");
$("#subdomain_available").text("Domain Available");
current_fs = $(this).parent();
next_fs = $(this).parent().next();
}
}
});
I am using bootstrap 4 modal, when I click on "Ok" button I call function and after that the modal disappear, but the back-ground still remains. whereas for the close button the modal and the back-ground dissapers its because I am using "data-dismiss="modal", but if I use this same for "Ok" button this is not working. I have used (data-backdrop="false"), but it completely removes the back-ground which i donot want. so can someone please tell me how to do that. I have uploaded the following code.
<div class="modal" tabindex="-1" role="dialog" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{title}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>{{question}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)="onConfirm($event)">Ok</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
.ts File
export class ModalComponent {
#Input() question: string = ''
#Input() title: string = ''
#Output() confirm = new EventEmitter<void>()
constructor() { }
onConfirm(event: Event) {
event.stopPropagation()
this.confirm.emit()
}
}
I have 2 modals that are triggered by selection of a drop down menu. If I have the "multi-part-delete modal" first and the "multi-part-move" modal second then the "multi-part-move" one does not show. The screen goes dark but the modal does not appear.
If I swap them around then the move one works and the delete one doesn't show. Anyone know how I can get them both to work.
<!-- Multi-Part Delete Modal -->
<div class="modal fade" id="multipartdeletemodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Delete Selected Parts?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<i data-icon="ei-trash" data-size="l" class="trash"></i>
<h5>Are you sure you want to delete these parts?<br>
This process cannot be undone</h5>
<form action="{% url 'multi-delete' project.id %}" method="post" id="multidelete">{% csrf_token %}</form>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button form="multidelete" type="submit" value="Submit" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
<!-- Multi-Part Move Modal -->
<div class="modal fade" id="multimovemodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Move Selected Parts?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<i data-icon="ei-trash" data-size="l" class="trash"></i>
<h5>Please select group?</h5>
<form action="{% url 'multi-delete' project.id %}" method="post" id="multimove">{% csrf_token %}</form>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button form="multimove" type="submit" value="Submit" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
use this IIFE function and you will have mulitple stackable modal support on bootstrap 4
(function multiple_modal() {
$(document).on('show.bs.modal', '.modal', function () {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function () {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
});
$(document).on('hidden.bs.modal', '.modal', function () {
$('.modal:visible').length && $(document.body).addClass('modal-open');
});
})()
Yes, stacked modals are currently not working in Bootstrap 4.1. What I did was make them sequentially close/open each other. For example, when a child("stacked") modal opens from a parent modal, the parent modal closes, and when a child modal closes, it re-opens a parent(previously opened) modal - so there's always one modal open at a time.
On the child modal, I have a data attribute data-parent-modal="#parentExampleModal"
I have the Javascript as below:
$('.modal').on('shown.bs.modal', function (e) {
let $this = $(this),
$parentModal = $this.parent().find($this.data('parent-modal') + '.modal');
if ($parentModal.length) {
$parentModal.modal('hide');
$this.on('hidden.bs.modal', function (e) {
$parentModal.modal('show');
});
}
});
If you need further explanation, please let me know.
You could do it with CSS by selecting the second modal
.modal:nth-of-type(even) {z-index: 1052 !important;}
.modal-backdrop.show:nth-of-type(even) {z-index: 1051 !important;}
I have a created a button when you click it a modal appears.
Here is the code:
<li style="float: right;">
<button id="myBtn" data-target="#myModal" ng-click="printDivModal('rollup-tab')">Modal Test</button>
</li>
In the js, the ng-click should open a model which contains data from stackModal.html
Here is the code in the js file:
$scope.printDivModal = function(divName) {
console.log('opening pop up');
var ModalInstance = $uibModal.open({
//animation: $ctrl.animationsEnabled,
templateUrl: 'app/views/modals/stackedModal.html',
size: 'lg',
/*
controller: function($scope) {
$scope.name = 'top';
}
*/
});
}
Here is the code for the model (stackedModal.html):
<!-- 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">The Modal Header</h4>
</div>
<div class="modal-body">
<p>Text inside the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
When I click the Model-Test button, all I see is a small white rectangle show on the screen. Nothing appears from the stackedModal html page. Why is this? Thanks.
Just remove modal wrappers div's, bootstrap-modal does it for you.
You just need to put modal content:
stackedModal.html:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">The Modal Header</h4>
</div>
<div class="modal-body">
<p>Text inside the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
I want a model to open when I click on a button in a web-grid. I have created a button which targets a modal by its ID. For each item in the model(a list), I want to create a modal with the id of the item. Below is my code:
<div id="divCurrentRented">
#{
WebGrid obj = new WebGrid(Model, rowsPerPage: 5);
}
#obj.Table(htmlAttributes: new
{
id="tableCurrentRented",
#class = "table"
},
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
rowStyle: "webgrid-row-style",
columns: obj.Columns(
obj.Column("Title", header: "Title"),
obj.Column("Author", header: "Author"),
obj.Column("Avaible", header: "Available", canSort:false),
obj.Column(header: "Rent", format:#<button type="button" class="btn btn-default" data-toggle="modal" data-target="##item.BookID">Yes</button>)
))
As you can see the data target of the button is equal to the id of the item.
my modal code as below:
<div class="modal fade" id="#Model.First().BookID" ( 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">Return confirmation</h4>
</div>
<div class="modal-body">
<p class="modalBody">Are you sure you want to return this book?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
As you can see in the first line, I am fetching the bookID of the first item. What I need is to fetch the id for each item of the list so that each button click would open its corresponding modal. Any idea how to do that?
To pass information from page to modal while staying to same page, you can do with bootstrap modal event listener show or shown and pass the data attributes value to modal
e.g to pass id and title to modal as data attributes inside modal trigger button.
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" data-id="123" data-title="I'm First Modal Title">Open Modal</button>
and use event property relatedTarget to get the data-attribute value e.g id inside modal event listener
var id = $(e.relatedTarget).data('id');
and pass it to modal e.g to <div class="modal-body"></div>
$(".modal-body").html(id);
example with id and title as data attributes passing to modal
$('#myModal').on('show.bs.modal', function (e) {
var id = $(e.relatedTarget).data('id');
var title = $(e.relatedTarget).data('title');
//pass date-title to modal header
$(".modal-title").html(title);
//Pass Id to modal body or any element in modal
$(".modal-body").html(id);
});
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" data-id="123" data-title="I'm First Modal Title">Open Modal</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" data-id="456" data-title="I'm Second Modal Title">Open Modal</button>
<div id="myModal" 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" aria-label="Close"> <span aria-hidden="true">×</span></button>
<h4 class="modal-title" aria-labellbyid="writeLabel"></h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer" id="edit-footer">
<input type="submit" data-dismiss="modal" class="btn btn-success" value="Submit">
</div>
</div>
</div>
</div>
Fiddle