I am working on Bootstrap Modal. I have two modals. The First Modal toggles/open the second modal dialog, when the user clicks on "Forgot Password" link. The second modal is the same as the first one except body.
What I want to do, on toggling from first modal to second one, the second modal will appear with different header and footer. Is it possible? How can I have this feature?
My code:
<div class="container">
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px; background-color: whitesmoke">
<button type="button" class="close" data-dismiss="modal">
<span title="close" class="glyphicon glyphicon-remove"></span>
</button>
<h2><span class="glyphicon glyphicon"></span> Login to our site</h2>
<p>Enter username and password to log on:</p>
</div>
<div class="modal-body" style="padding:40px 50px;">
<div id="modalTab">
<div class="tab-content">
<div class="tab-pane active" id="login">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-pencil"></span> Password</label>
<!--<div class="inner-addon right-addon">
</div>-->
<input type="password" class="form-control" id="password" placeholder="Enter password">
<i style="cursor: pointer" id="seePass" title="Click here to see password" class="glyphicon glyphicon-eye-open"></i>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
</form>
</div>
<div class="tab-pane fade" id="forgotpassword">
<form method="post" action='' name="forgot_password">
<p>Send us your email and we'll reset it for you!</p>
<input type="text" name="eid" id="email" placeholder="Email">
<p>
<button type="submit" class="btn btn-primary">Submit</button>
Wait, I remember it now!
</p>
</form>
</div>
</div>
</div>
</div>
<!--End Body-->
<div class="modal-footer" style="background-color: whitesmoke">
<!--<button type="submit" class="btn btn-danger btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>-->
<p class="text-center">Not a member? Sign Up</p>
<p class="text-center">Forgot Password?</p>
</div>
</div>
</div>
</div>
</div>
Here you go, I hope this code helps you:
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script type="text/javascript">
$(function () {
var showMessage = function (heading, message) {
$(".modal-body").empty();
$(".modal-title").empty();
$(".modal-title").html(heading);
$(".modal-body").html(message);
$('#messageBox').modal('show');
};
$("#popup1").click(function () {
showMessage("Heading 1", "Modal popup message 1");
});
$("#popup2").click(function () {
showMessage("Heading 2", "Modal popup message 2");
});
});
</script>
<input id="popup1" type="button" value="Show Popup" />
<input id="popup2" type="button" value="Show Another Popup" />
<div class="modal fade" id="messageBox" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Output Popup 1:
Output Popup 2:
Just use that as an example and make the necessary changes to your code to make it work
Related
I am trying to load a bootstrap modal on a button click.
Already I am have one more Modal in the page which is working fine but on the button click but when I am trying to load another modal on a button click, its just loading faded screen.
<button class="btn btn-green btn-sm" data-toggle="modal" data-target="#addUserModal"><i class="fa fa-plus"></i> <span>Add User</span></button>
<!-- Add User Modal -->
<div class="modal fade" id="addUserModal" role="dialog" aria-labelledby="addUserModalLabel" aria-hidden="true">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title">Add User</h6>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form action="" method="POST">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">User ID</span>
</div>
<input type="text" class="form-control" id="user_id" value="{{user.UserID}}">
</div>
<div class="input-group mb-3">
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
Could it be that there is a mistake in your -tags? That may cause an error in your modal-body.
<div class="modal-body">
<form action="" method="POST">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">User ID</span>
</div>
<input type="text" class="form-control" id="user_id" value="{{user.UserID}}">
</div>
//removed orphan tag
</form>
</div>
When removed, the modal works fine.
The code you posted is working fine
Codepen Link
Make sure you have added the jquery, popper.js.
I am using bootstrap modal that i am showing on ajax success call.
I have 2 issues.
1) All the contents are showing and working but the form fields looks not focused as it happens in normal modal.
2) the regex not applying in the form field ?
Where is the issue?
javascript
$(document).ready(function() {
$.validator.addMethod(
"regx",
function(value, element, regexp) {
var re = new RegExp(regexp);
return this.optional(element) || re.test(value);
},
"Please check your input."
);
$(function (){
//validation rules
$("#signup_form").validate({
rules: {
"name": {
required: true,
minlength: 5,
regx: /^[a-zA-Z]$/
},
submitHandler: function() {
$.post('form_process.php',
$('form#signup_form').serialize() ,
function(){
$("#myModal1").modal('show');
$('#myModal1').on('shown.bs.modal', function () {
$('#email').focus();
});
Html
<div class="container">
<div class="modal" id="myModal1" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content"> <!--This should be preset-->
<div class="modal-header">
<!--
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Not Now</button>
-->
<!--<button type="button" class="close" data-dismiss="modal">×</button>
-->
<h3>Login to Website</h3>
</div>
<div class="modal-body" style="text-align:center;">
<div class="">
<div class="">
<div id="modalTab">
<div class="tab-content">
<div class="tab-pane active" id="login">
<form method="post" action='' name="login_form">
<p>
<input type="text" name="eid" id="email" placeholder="Email">
</p>
<p>
<input type="password" name="passwd" placeholder="Password">
</p>
<p>
<button type="submit" class="btn btn-primary">Sign in</button>
Forgot Password?
</p>
</form>
</div>
<div class="tab-pane fade" id="forgotpassword">
<form method="post" action='' name="forgot_password">
<p>Hey this stuff happens, send us your email and we'll reset it for you!</p>
<input type="text" class="span12" name="eid" id="email" placeholder="Email">
<p>
<button type="submit" class="btn btn-primary">Submit</button>
Wait, I remember it now!
</p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<span class="glyphicon glyphicon-remove"></span> Not now!
</div>
</div>
</div>
</div>
</div>
You've missed to add modal-content and wrap the modal-header and modal-body into it.. modal-content is the one which contains style background-color. Below would be your changes.
<div class="modal" id="myModal1" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-content"> <!--This should be preset-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Login to Website</h3>
</div>
<div class="modal-body" style="text-align:center;">
<div class="row-fluid">
<div class="span10 offset1">
<div id="modalTab">
<div class="tab-content">
<div class="tab-pane active" id="login">
<form method="post" action='' name="login_form">
<p>
<input type="text" class="span12" name="eid" id="email" placeholder="Email">
</p>
<p>
<input type="password" class="span12" name="passwd" placeholder="Password">
</p>
<p>
<button type="submit" class="btn btn-primary">Sign in</button>
Forgot Password?
</p>
</form>
</div>
<div class="tab-pane fade" id="forgotpassword">
<form method="post" action='' name="forgot_password">
<p>Hey this stuff happens, send us your email and we'll reset it for you!</p>
<input type="text" class="span12" name="eid" id="email" placeholder="Email">
<p>
<button type="submit" class="btn btn-primary">Submit</button>
Wait, I remember it now!
</p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
So in bootstrap you cannot have a modal within a modal. I completely understand this. I have a modal that pops up from a button. I need a delete button inside that modal, that deletes the modal button. Any help? Any ideas? Thank you.
Here is a simple modal fiddle if needed: JSFiddle
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalHorizontal">Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<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">
Modal title
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="inputEmail3">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" />Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
Try adding an id to the modal you want to remove and the delete button.
In this example I used jquery to remove the button.
$('#delete-button').click(function() {
$('#delete_this').remove();
});
Updated jsfiddle
I am trying to open a single modal on multiple buttons on the same page. Unfortunately I can't figure out a way to do so.
I want to have multiple signup option the same page which open up a modal and a user can fill out the form on the modal and signup..
With the current code the modal works on the first button but doesn't work on the other buttons on the page. :(
Can anyone tell me a solution to this?
Here is my code
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signupModal">
Create an account
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signupModal">
Sign Up Here
</button>
<!-- Modal -->
<div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="row">
<div class="col-sm-6 text-center col-xs-height">
<div class="signup-popup">
<h4>Signup Now</h4>
<input class="col-xs-12" type="text" name="username" placeholder="Email Address">
<input class="col-xs-12" type="password" name="password" placeholder="Password">
<input class="col-xs-12" type="password" name="confirmPassword" placeholder="Confirm Password">
<input class="btn btn-primary btn-filled col-xs-12" type="submit" value="Submit">
</div>
</div>
<div class="col-sm-6 col-xs-height">
<div class="signup-facebook">
<div class="signup-facebook-container">
<a class="btn btn-block btn-social btn-facebook signup-facebook-btn" href="#">
<i class="fa fa-facebook"></i> | Signup with Facebook
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks in Advance!
make sure bootstrap js, bootstrap css and jquery is added.Solution of your problem. jsfiddle example. Please have a look
JSFIDDLE example.
Create an account
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signupModal">
Sign Up Here
</button>
<!-- Modal -->
<div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="row">
<div class="col-sm-6 text-center col-xs-height">
<div class="signup-popup">
<h4>Signup Now</h4>
<input class="col-xs-12" type="text" name="username" placeholder="Email Address">
<input class="col-xs-12" type="password" name="password" placeholder="Password">
<input class="col-xs-12" type="password" name="confirmPassword" placeholder="Confirm Password">
<input class="btn btn-primary btn-filled col-xs-12" type="submit" value="Submit">
</div>
</div>
<div class="col-sm-6 col-xs-height">
<div class="signup-facebook">
<div class="signup-facebook-container">
<a class="btn btn-block btn-social btn-facebook signup-facebook-btn" href="#">
<i class="fa fa-facebook"></i> | Signup with Facebook
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Try this,
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".signupModal">
Create an account
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".signupModal">
Sign Up Here
</button>
<!-- Modal -->
<div class="modal fade signupModal" id="signupModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="row">
<div class="col-sm-6 text-center col-xs-height">
<div class="signup-popup">
<h4>Signup Now</h4>
<input class="col-xs-12" type="text" name="username" placeholder="Email Address">
<input class="col-xs-12" type="password" name="password" placeholder="Password">
<input class="col-xs-12" type="password" name="confirmPassword" placeholder="Confirm Password">
<input class="btn btn-primary btn-filled col-xs-12" type="submit" value="Submit">
</div>
</div>
<div class="col-sm-6 col-xs-height">
<div class="signup-facebook">
<div class="signup-facebook-container">
<a class="btn btn-block btn-social btn-facebook signup-facebook-btn" href="#">
<i class="fa fa-facebook"></i> | Signup with Facebook
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="btn" id="add-more">Click Me</button>
Make sure that bootstrap.js and bootstrap.css included
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.