I need to close 2 modals in the same time. Why?
I have 2 modals, first shows the information and the second shows a exclude confirmation. When i close the second i want to close all modals.
This is in ASP.NET MVC and RAZOR.
This JS dont work, can you help me? Thanks!!
$(function () {
$(".close-modal-edit").click(function () {
$('.modal').modal('hide');
});
});
<!-- FIRST MODAL -->
<div class="portfolio-modal modal fade" id="dialog" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body text-left">
<a class="btn btn-success pull-right" data-dismiss="modal"> Close </a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CONFIRMATION MODAL -->
<div class="portfolio-modal modal fade" id="dialog-exclude" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content modal-content-edit">
<div class="close-modal close-modal-edit" data-dismiss="modal">
</div>
<div class="container">
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<div class="modal-body text-left">
<a class="btn btn-success pull-right close-modal-edit" data-dismiss="modal"><i class="fa fa-times"></i> Cancel </a>
</div>
</div>
</div>
</div>
</div>
</div>
this seems to work for me. Looping through the modal objects and closing them individually.
$(".close-modal-edit").click(function () {
$.each($(".modal"), function (i, obj) {
$(obj).modal('hide');
});
});
Note: looks like your original $('.modal')modal('hide'); works for me as well here's a fiddle, use it this as a base, see if it works in your project, and if not we'll need more info about your project. http://jsfiddle.net/hxo5kccs/
Can you remove data-dismiss="modal" from both modal and try?
Related
JSFiddle DEMO: https://jsfiddle.net/2yx16k8L/
I need this JS code to be able to open the entire DIV when clicked. However, this disables the modal button in the dropdown. It won't open the modal anymore.
How do I go about this?
HTML:
<div class="project__body" onclick="location.href='next.html';">
<div class="row">
<div class="col-10">
<h1>Title of the DIV!</h1>
</div>
<div class="col-2 text-right">
<div class="dropdown">
<button type="button" class="dropdown-btn dropdown-toggle" data-toggle="dropdown">Menu</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="edit.html">Edit</a>
<a class="dropdown-item" href="delete.html">Delete</a>
<a class="dropdown-item" data-toggle="modal" data-target="#modal">Copy</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<p>There's more content here in this div. There's more content here in this div. There's more content here in this div. </p>
</div>
</div>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal">Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">x</button>
</div>
<div class="modal-body">
Body of the modal
</div>
</div>
</div>
</div>
JS:
$('.dropdown').click(function(event) {
$(this).children(".dropdown-menu").toggle()
event.stopPropagation();
})
Add this:
$(".dropdown-item[data-target='#modal']").click(function(){
$("#modal").modal("show");
});
Demo:
https://jsfiddle.net/q31juvra/
I am trying to make separate edit and delete on my CRM model but could not figure out how to bind those buttons with my field although I have created the API for this in angular I need a bit help.
Thanks in advance
below is a bootstrap code of the edit and delete buttons
<div id="delete_department" class="modal custom-modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content modal-md">
<div class="modal-header">
<h4 class="modal-title">Delete Department</h4>
</div>
<div class="modal-body card-box">
<p>Are you sure want to delete this?</p>
<div class="m-t-20 text-left">
Close
<button type="submit" class="btn btn-danger" >Delete</button>
</div>
</div>
</div>
</div>
</div>
<div id="edit_department" class="modal custom-modal fade" role="dialog">
<div class="modal-dialog">
<button type="button" class="close" data-dismiss="modal" (click)="edit(list)">×</button>
<div class="modal-content modal-md">
<div class="modal-header">
<h4 class="modal-title">Edit Department</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label>Department Name <span class="text-danger">*</span></label>
<input class="form-control" value="IT Management" type="text">
</div>
<div class="m-t-20 text-center">
<button class="btn btn-primary btn-lg" (click)="edit(list)">Save Changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
1: declare a property in your component eg: department,which store the current operate department object on edit button clicked
2: bind the property of department to edit dialog template
3: remove role="dialog" from your dialog template(beacuse you need to do something before dialog open,you must open dialog by yourself)
4: in your edit dialog button click function, you set property 'department' value to store current operate department,and append this code $('#edit_department').modal('show')
i have a modal and i try to implement nested comments
now i want to send the parent comment id to child comment in modal
button that show modal:
<button class="btn btn-xs btn-light" data-target="#commentModal" data-toggle="modal" data-parent="3">پاسخ</button>
<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModal" aria-hidden="true" dir="rtl">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h4 id="modal-label-3" class="modal-title">ارسال نظر</h4>
</div>
<div class="modal-body">
<div class="respond-form" id="respond" style="padding-top: 0">
<form action="/comment" class="form-gray-fields">
{{ csrf_field() }}
<input type="hidden" name="parent_id" value="0">
<br>
<div class="row">
<div class="col-md-12">
<div class="form-group text-center">
<button class="btn btn-block" type="submit">ثبت دیدگاه</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
i want to send value of data-parent in button, to "vlaue" attribute of input in modal
i see this for bootstrap modals:
$('#commentModal').on('show.bs.modal' , function (event) {
let button = $(event.relatedTarget);
let parentId = button.data('parent');
let modal = $(this);
modal.find("[name='parent_id']").val(parentId);
});
but i do not use bootstrap and following code not working for me!
How about something like this?
$(".btn").on("click", function(){
$(".modal-body").find("[name=parent_id]").val($(this).data("parent"));
// Code to show modal
});
I have several card in a page, I rendered all of them with a loop, I want when user clicked on each one , related modal show to user, I implement that with following snippet
{% for i,item in node.field_what_you_will_build %}
<div class="prj-box " data-dismiss="modal" data-toggle="modal" data-target="#projectcard-{{ i }}">
<div id="projectcard-{{ i }}" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header nopadding">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="login-head">
<img src="/{{ directory }}/images/logo-b.png" />
</div>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
<div class="lbl"> {{ 'Project'|t }}</div>
<div class="title">{{ item.first }}</div>
<div class="desc">{{ item.second }}
</div>
<div class="badge">{{ i+1}}</div>
<div class="shadow-wrapper">
</div>
</div>
{% endfor %}
when I click on cards modal getting show correctly but when click close modal disappear but background getting dark, when I inspect my markup I saw
<div class="modal-backdrop fade in"></div>
<div class="modal-backdrop fade in"></div>
<div class="modal-backdrop fade in"></div>
added to end of body.where is the problem? is my solution is correct to implement multi bootstrap modal on a page? if not what is the true solution?
it seems when I click on close some <div class="modal-backdrop fade in"></div> add to my markup
I found the solution for this issue, the problem occur because Modal markup was inside the element cause modal triggered on click, I mean the the problem is
<div class="prj-box " data-dismiss="modal" data-toggle="modal" data-target="#projectcard-{{ i }}">
<div id="projectcard-{{ i }}" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header nopadding">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="login-head">
<img src="/{{ directory }}/images/logo-b.png" />
</div>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
</div>
**So solution is **
<div class="prj-box " data-dismiss="modal" data-toggle="modal" data-target="#projectcard-{{ i }}">
</div>
<div id="projectcard-{{ i }}" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header nopadding">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="login-head">
<img src="/{{ directory }}/images/logo-b.png" />
</div>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
I mean Don't Put Modal Content inside the element cause modal triggered
Hi i am performing crud operations on a table. So i have to perform two operations like reset password and to delete the entry. I have added a bootstrap modal to confirm the action. I am able to pass the value and use the first modal but when i click on second modal it does not fire up.
My code is as follow:-
<td>
<a href='#' data-href='modules/reset.php?id={$row['id']}' data-toggle='modal' data-target='#resetpassword' data-popup='tooltip' title='Reset Password'><i class='icon-lock2'></i></a>
<a href='#' data-href='modules/delete.php?id={$row['id']}' data-toggle='modal' data-target='#modal_delete' data-popup='tooltip' title='Delete'><i class='icon-trash'></i></a></li>
</td>
Modals:-
Delete password modal:
<div id="modal_delete" class="modal fade" style="font-weight: normal;">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body">
<div class="row">
<div class="col-md-12 text-center">
<i class="fa fa-warning fa-5x"></i>
</div>
<div>
<div class="row">
<div class="col-md-12 text-center">
<br/><h5>Are you sure you want to delete?</h5><br/>
</div>
<div>
<div class="modal-footer text-center">
<button type="button" class="btn btn-default btn-lg" data-dismiss="modal">Cancel</button>
<a class="btn btn-danger btn-lg btn-ok">Yes, delete it!</a>
</div>
</div>
</div>
</div>
Reset password modal:
<div id="resetpassword" class="modal fade" style="font-weight: normal;">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body">
<div class="row">
<div class="col-md-12 text-center">
<i class="fa fa-warning fa-5x"></i>
</div>
<div>
<div class="row">
<div class="col-md-12 text-center">
<br/><h5>Are you sure you want to reset password?</h5><br/>
</div>
<div>
<div class="modal-footer text-center">
<button type="button" class="btn btn-default btn-lg" data-dismiss="modal">Cancel</button>
<a class="btn btn-danger btn-lg btn-oks">Yes, reset it!</a>
</div>
</div>
</div>
</div>
Javascript:-
<script>
$('#modal_delete').on('show.bs.modal', function(e) {
$(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
});
</script>
<script>
$('#resetpassword').on('show.bs.modal', function(e) {
$(this).find('.btn-oks').attr('href', $(e.relatedTarget).data('href'));
});
</script>
By this method only the delete modal works but the reset modal does not fire up. The modal whose javascript function is before only works. How to make both of them work. Any help would be highly appreciated.
Maybe you should enclose your script inside jquery on ready
$( document ).ready(function() {
//your javascript code
});
Some of your <div>s should be </div>. If you look carefully you will see that the reset password modal is actually within the delete password modal code.
EDIT: Slightly off topic, and I understand if you would prefer to roll your own, but have you tried SweetAlert? They have some nice looking alert boxes and it's pretty easy to use.