In my JSP page, I have a modal that shows a page which has another modal (inner modal).
The first modal:
<div class="modal-dialog modal-lg" style="background: white; width: 90% !important">
<input type="hidden" id="report-request-data-id" value="${requestId}"/>
<div class="modal-body">
<div id="reportDataDetailsDiv"></div>
</div>
<div class="modal-footer">
<label class="btn-is float">
<spring:message code='close.label'/>
<input type="button" id="close_report_request_view" class="col-xs-3 col-lg-1 col-md-1" data-dismiss="modal" style="display: none;"/>
</label>
</div>
</div>
The inner modal (loaded in the div with id "reportDataDetailsDiv" above):
<div class="modal-dialog modal-lg" style="background: white;border-radius: 6px;">
<div class="modal-body">
<div class="modal-content">
<div class="col-centered col-lg-12 col-xs-12 ">
.....etc
<div class="modal-footer">
<label class="btn-is float">
<spring:message code='close.label'/>
<input type="button" class="cus-close-modal-btn col-xs-3 col-lg-1 col-md-1" style="display: none;"/>
</label>
</div>
</div>
</div>
</div>
The problem happens when I click the close button in the inner modal. When I do that, both modal gets closed, but I would like the close action to be independent for each modal. How should I correctly do that?
Thank you.
As you are loading other modal inside reportDataDetailsDiv which is inside main-modal you can use .show() show it and whenever close button is clicked you can remove whole div which is added inside reportDataDetailsDiv.
Demo Code :
//suppose other modal is added like below
$(".addmodal").click(function() {
//append modal undr div
$("#reportDataDetailsDiv").html('<div class="modal-dialog modal modal-child" style="background: white;border-radius: 6px;" ><div class="modal-body"><div class="modal-content">Some message to show ....<div class="col-centered col-lg-12 col-xs-12 "><div class="modal-footer"> <label class="btn-is float"><input type="button" class="cus-close-modal-btn " value ="Close" style=""/> </label> </div></div></div></div>')
$(".modal-child").show(); //show that modal
$(this).hide();
$("#close_report_request_view").prop('disabled', true);//disable main modal button
})
//onclick of close button for modal added
$(document).on('click', '.cus-close-modal-btn', function() {
$(this).closest(".modal-child").remove(); //remove whole div
$("#close_report_request_view").prop('disabled', false);//enable main modal buton
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Click to open modal
<div class="modal-dialog modal fade modal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true" style="background: white; width: 90% !important">
<input type="hidden" id="report-request-data-id" value="1" />
<div class="modal-body">
<div id="reportDataDetailsDiv"></div>
</div>
<button class="addmodal btn btn-primary">Click me to open other modal</button>
<div class="modal-footer">
<label class="btn-is float">
Close
<input type="button" id="close_report_request_view" class="col-xs-3 col-lg-1 col-md-1" data-dismiss="modal" style="display: none;"/>
</label>
</div>
</div>
Related
I have a button that when its clicked it shows a window with some information, as follows
$(function() {
$("#basicModal").collapse('toggle');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
Click to open Modal
</div>
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form>
<div class="modal-body">
<div class="row">
<img src="css/cabin.jpg" class="img-responsive col-md-6" alt="conductor">
<div class="row">
<label>Name: </label>
<label id="basicModal-placeName">placeName</label>
<br>
<label>Address: </label>
<label id="basicModal-placeAddress">#asf-2431</label>
</div>
</div>
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
Now I want to do the same thing the first "a" tag does but programmatically and erase the that container, leaving just the code starting at the div with class modal. I have tried the following:
$("#basicModal").collapse('toggle');
But this just shows the windows and blocks the content that is inside it that is supposed to be interactive to the user. How can I achieve this?
I solve this by using $('#basicModal').modal('show');
i want to create dynamic model popup so i have write below js code..but when i have click on single image then model pop up show all images content in dynamic created div . i want same image and its content in model popup.
<script>
$("#pop").on("click", function() {
$('#imagepreview').attr('src', $('#imageresource').attr('src'));
$('#imagemodal').modal('show');
});
</script>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12" >
<div class="row">
<div id="pop">
<a href="#" class="dialogpopup" style=" height: auto;width: 600px;display: -webkit-inline-box;">
<div ng-repeat="Spaces in SpaceList" style="height:auto!important;display: table-caption;">
<span>{{Spaces.Name}}</span>
<img id="imageresource" src="{{Spaces.Image}}" style="width:200px; height: 200px;">
<span>{{Spaces.MaxCapacity}}</span>
</div>
</a>
</div>
<!-- Modal -->
<div class="modal fade" id="imagemodal" 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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">{{Spaces.Name}}</h4>
</div>
<div class="modal-body addright" id="modelimg1" ng-repeat="Spaces in SpaceList">
<img src="{{Spaces.Image}}" id="imagepreview" style="width:400px; height: 270px;">
<p class="parapadding">
Name:{{Spaces.Name}}<br />
Description:{{Spaces.Description}}<br />
Size:{{Spaces.Size}}<br />
Capacity:{{Spaces.MaxCapacity}}<br />
Configuration:<br />
</p>
</div>
</div>
</div>
</div>
</div>
</div>
ID param of any tag should be unique. And in your repeater you have same ids. Change it to smth like id="{{'imagepreview' + $index}}" and
ng-repeat="Spaces in SpaceList track by $index"
I ma trying to display username in modal text box using onclick button
I have a button from there on onclick i am calling onclick="getUserName(this.id)"
this.id
gives me name which i want to set in
modal textbox userName
Here is my function
function getUserName(username) {
$('#editUserPopUp').bind('show',function(){
alert(username);
$("#userName").val(username);
});
}
I am getting username in alert(username)
but how do i set thsi value to my modal, username text field
Here is my Modal
<div class="modal fade" id=editUserPopUp tabindex="-1"
role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Update Password</h4>
</div>
<div class="modal-body">
<form class="EditUserBody" role="form" id="usermanagement_editUser="novalidate" method="POST">
<div class="input-group col-md-8">
<span class="input-group-addon">User Name</span>
<input class="form-control" id="userName" type="text" class="input-medium" disabled />
</div>
</form>
</div>
</div>
</div>
</div>
This should work.
But you should also take a look at the Bootstrap documentation about modal windows. There is a section explaining how to vary modal content.
Varying modal content based on trigger button
Use event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked.
function getUserName(username) {
var $modal = $('#editUserPopUp'),
$userName = $modal.find('#userName');
$userName.val(username);
$modal.modal("show");
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button onclick="getUserName(this.id)" id="Foo Bar">Open Modal</button>
<div class="modal fade" id=editUserPopUp tabindex="-1"
role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Update Password</h4>
</div>
<div class="modal-body">
<form class="EditUserBody" role="form" id="usermanagement_editUser="novalidate" method="POST">
<div class="input-group col-md-8">
<span class="input-group-addon">User Name</span>
<input class="form-control" id="userName" type="text" class="input-medium" disabled />
</div>
</form>
</div>
</div>
</div>
</div>
I think the problem is you are using show event,instead try call shown event after all, like so :
function getUserName(username) {
$('#editUserPopUp').modal('show');
$('#editUserPopUp').on('shown', function () {
alert(username);
$("#userName").val(username);
})
}
p/s : did't test it. Hope this help. Comment if did't work.
I'm using Bootstrap framework v3.3.0 for my website.
I'm dealing with multiple modal dialog boxes. In one dialog there is one form having one textfield, one date control and one file control. After submitting the form successfully I hide this modal and show another modal with success message. On this modal there is one button having text "Submit another form". When user clicks on this button the dialog containing success message get close and the modal dialog containing form opens but it contains the previous values that I filled in. I don't want these values again. I want to clear these fields. How should I do this?
Following is the code:
HTML code:
<div class="modal fade" id="newModal" 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">Submit Form</h4>
</div>
<div class="modal-body" style="max-height: 300px; overflow-y: auto;">
<br/>
<!-- The form is placed inside the body of modal -->
<form id="request_form" method="post" class="form-horizontal" enctype="multipart/form-data" action="">
<div class="form-group">
<label class="col-sm-4 col-sm-offset-1 control-label">Reg ID <span style="color:#FF0000">*</span> :</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="reg_id" id="reg_id"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 col-sm-offset-1 control-label">Reg Date<span style="color:#FF0000">*</span> :</label>
<div class="col-sm-5">
<input type="text" class="form-control date_control" id="reg_date" name="reg_date" value="" placeholder="yyyy-mm-dd">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 col-sm-offset-1 control-label">Upload Image<span style="color:#FF0000">*</span> :</label>
<div class="col-sm-5">
<input type="file" name="reg_image" id="reg_image" accept="image/*" capture="camera" />
</div>
</div>
<div class="form-group">
<div class="col-sm-5 col-sm-offset-5">
<button type="submit" class="btn btn-success" id="btn_receipt_submit">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="successModal" 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">Your Request Uploaded Successfully</h4>
</div>
<div class="modal-body" style="max-height: 300px; overflow-y: auto;">
<h4 style="font-weight:bold;text-align: center;">Thank you!</h4>
<p style="text-align: justify;">Your request has been successfully submitted.</p>
<div class="modal-footer" style="text-align:center;">
<button type="button" class="btn btn-danger" id="btn_exit">Exit</button>
<button type="button" class="btn btn-success" data-dismiss="modal" id="btn_scan_another">Scan Another Receipt</button>
</div>
</div>
</div>
</div>
</div>
The jQuery code :
$(document).ready(function() {
$("#btn_scan_another").on("click", function(event){
event.preventDefault();
$('#successModal').modal('hide');
$('#newModal').modal('show');
});
});
Thanks.
You could add something like:
$('#newModal').find('form')[0].reset();
before showing it
You actually don't have any JS code that does what you want.
Have you tried anything?
How about this:
$('#newModal').on('hidden.bs.modal', function(){
$(this).find('form')[0].reset();
});
I have 2 modals in a webpage. One of them is for registering a new user and the other is for logging in.
Here is there code
<div class="modal fade" id="register" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Register</h4>
</div>
<div class="modal-body" id="form">
<div id="form-error-register" class="form-error"></div><br>
<div class="input-group">
<span class="input-group-addon">Username: </span>
<input type="text" class="form-control" placeholder="2-20 characters" id="username-register">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">Password: </span>
<input type="password" class="form-control" placeholder="At least 5 characters" id="password-register">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">Confirm Password: </span>
<input type="password" class="form-control" placeholder="At least 5 characters" id="cpassword-register">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">Email: </span>
<input type="text" class="form-control" placeholder="Must be a real email address" id="email-register">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-danger" onclick="cancelRegister();">Cancel</button>
<button class="btn btn-success" onclick="registerButton();">Login</button>
</div>
</div>
</div>
<div class="modal fade" id="login" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Login</h4>
</div>
<div class="modal-body" id="form">
<div id="form-error-login" class="form-error"></div><br>
<div class="input-group">
<span class="input-group-addon">Username: </span>
<input type="text" class="form-control" placeholder="" id="username-login">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">Password: </span>
<input type="password" class="form-control" placeholder="" id="password-login">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-danger" onclick="cancelLogin();">Cancel</button>
<button class="btn btn-success" onclick="loginButton();">Login</button>
</div>
</div>
</div>
The register modal shows fine but the modal does not.
Here is the code to show the modals:
<li>Register</li>
<li>Login</li>
This could not be some css error because the register modal loads.
When I attempt to load the login modal (either via js in the console, or by the button) the webpage goes dark (as if a modal is showing) but the modal never shows.
The #login modal doesn't appear because it's inside the #register modal.
You should add another div close tag before the #login modal declaration.
The reason why the modal is not visible is that its parent, the #register modal, is hidden.