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.
Related
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
});
Trying to open Bootstrap's modal-content from another page, however it opens as new page instead of modal. Not sure why it is behaving like this.
Here is my code from page1:
<div class="text-center list-details" >
<h4>Time Frame: {{offer.delivery_duration? offer.delivery_duration : 'N/A'}}</h4>
<p> </p>
<a data-toggle="modal" href="brands/{{request.variant.model.brand.id}}/models/{{request.variant.model.id}}/variants/{{request.variant.id}}/requests/{{request.id}}/offers/{{offer.id}}/modal" data-target="#myModal" class="btn btn-success" role="button">View Full Offer</a>
</div>
<div id="myModal" class="modal fade" >
<div class="modal-dialog">
<div class="modal-content" style="border-radius: 0px;">
</div>
</div>
</div>
Here is the page2 which contains modal-content:
<div class="modal-header" style="background-color: #213a4c; color:white;">
<button type="button" class="close" data-dismiss="modal" style="color: #fff;">×</button>
<h4 class="modal-title" style="color: #fff;"><strong>{{brand.name}} {{model.name}} {{variant.name}}</strong></h4>
</div>
<div class="modal-body" style="padding: 0px;">
<div class="col-md-12">
<div class="col-md-12 text-center noside-padding">
<h2>{{brand.name}} {{model.name}} {{variant.name}}</h2>
</div>
<div class="col-md-6 n cardeal-detail">
<!-- first row -->
<div class="col-md-6 noside-padding">
<h5>Ex Showroom Price</h5>
</div>
<div class="col-md-6 noside-padding text-right ng-binding">
{{offer.ex_showroom_price | currency:"₹ "}}
</div>
</div>
</div>
</div>
<div class="modal-footer text-center" >
<button type="button" class="btn btn-default" data-dismiss="modal" style="margin-top: 20px;">Close</button>
</div>
Could you please anyone help me on this regard?? how do i get page2 as modal in page1.
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?
i have a little problem when im trying to clear bootstrap modal data..
there is my modal.
<div id="modal-creacion-alias" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<form id="form-alias-dominio" method="POST" class="form">
<div class="modal-content">
<div class="form-body">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h2 class="modal-title">Alias de dominios</h2>
</div>
<div class="modal-body">
<div class="form-group">
<label class="col-md-4 control-label">Nombre del Alias<span class="required">*</span></label>
<div class="col-md-8">
<div class="input-icon right">
<i class="fa fa-info-circle tooltips" data-original-title="Contraseña" data-container="body"></i>
<input type="text" class="form-control" name="nombre-alias-dominio" id="nombre-alias-dominio">
<br>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer ">
<button type="button" data-dismiss="modal" class="btn default">Cancelar <i class="fa fa-sign-out"></i></button>
<button type="submit" id="crear-alias-domino" class="btn gtd-blue-hard crear-alias-domino">Crear <i class="fa fa-plus"></i></button>
</div>
</div>
</div>
</form>
</div>
</div>
and this is the js function:
$('body').on('hide.bs.modal', '.modal', function () {
&(this).removeData('bs.modal');
});
but when i close and re open modal the data still there.
how can i solve it?
thanks.
You can reset all input data by using $(form).trigger('reset')
$('body').on('hide.bs.modal', '.modal', function () {
$('#form-alias-dominio').trigger("reset"); //here your form_id
});
I was able to clear data doing this
$('body').on('hide.bs.modal', '.modal', function (e) {
$(this).find('form').trigger("reset");
});
thanks #Sadikhasan
I've seen a lot of examples of modals. But they work perfectly only with bootstrap 2 ( css files)
When I use it with bootstrap 3.1.1 css files . It doesn't works.
<div class="container">
<h2>Example of creating Modals with Twitter Bootstrap</h2>
<div id="example" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>This is a Modal Heading</h3>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>You can add some text here.</p>
</div>
<div class="modal-footer">
Call to action
Close
</div>
</div>
<p>
<a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Launch demo modal</a>
</p>
</div>
According to Bootstrap 3 documentation, you need to structure your HTML like this:
EXAMPLE HERE
<a class="btn btn-primary btn-large" data-toggle="modal" data-target=".modal">Launch demo modal</a>
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>This is a Modal Heading</h3>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>You can add some text here.</p>
</div>
<div class="modal-footer">
Call to action
Close
</div>
</div>
</div>
</div>
You have missing and invalid CSS classes. Main problem is hide fade in.
Here is the js fiddle link.
<div class="container">
<h2>Example of creating Modals with Twitter Bootstrap</h2>
<div id="example" class="modal fade" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>This is a Modal Heading</h3>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>You can add some text here.</p>
</div>
<div class="modal-footer">
Call to action
Close
</div>
</div>
</div>
</div>
<p> <a data-toggle="modal" href="#example"
class="btn btn-primary btn-large">Launch demo modal</a>
</p>
</div>