Modal not shown while clicking the button in BootStrap - javascript

Have a look at the below code:
<div class="loginPanel">
<div class="myFormContainer">
<div class="myPanelHeadingContainer">
<h3 class="myPanelTitle">
Login
</h3>
<span id="flipper1">
Register
</span>
</div>
<div class="myPanelBody">
<form id="loginForm">
<div class="form-group">
<label for="authCode">Authentication Code</label>
<input type="password" class="form-control" id="authCode" placeholder="Auth code" />
</div>
<button type="submit" class="btn btn-default" data-toggle="modal" data-target="#loadingModal">Submit</button>
</form>
</div>
</div>
</div>
<div class="registerPanel">
<div class="myFormContainer">
<div class="myPanelHeadingContainer">
<h3 class="myPanelTitle">
Register
</h3>
<span id="flipper2">
Login
</span>
</div>
<div class="myPanelBody">
<form id="registerForm">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName" placeholder="Your name here" />
</div>
<div class="form-group">
<label for="newAuthCode">New Authentication Code</label>
<input type="password" class="form-control" id="newAuthCode" placeholder="New auth code" />
</div>
<div class="form-group">
<label for="clientSecret">Client Secret</label>
<input type="password" class="form-control" id="clientSecret" placeholder="Client secret" />
</div>
<button type="submit" class="btn btn-default" data-toggle="modal" data-target="#loadingModal">Submit</button>
</form>
</div>
</div>
</div>
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="sk-fading-circle">
<div class="sk-circle1 sk-circle"></div>
<div class="sk-circle2 sk-circle"></div>
<div class="sk-circle3 sk-circle"></div>
<div class="sk-circle4 sk-circle"></div>
<div class="sk-circle5 sk-circle"></div>
<div class="sk-circle6 sk-circle"></div>
<div class="sk-circle7 sk-circle"></div>
<div class="sk-circle8 sk-circle"></div>
<div class="sk-circle9 sk-circle"></div>
<div class="sk-circle10 sk-circle"></div>
<div class="sk-circle11 sk-circle"></div>
<div class="sk-circle12 sk-circle"></div>
</div>
</div>
</div>
</div>
As, you can see..the modal is expected to pop when submit button is clicked in either form. But When I click the submit button in the Login form, nothing happens. I know I have made some mistakes because it was working properly a few hours back then I don't know what I did wrong and now my code is completely broken. The modal window is there to show a loading spinner. In the above code, you can see an anchor element in each Form with text Register and Login respectively. I don't know if it's necessary but I will explain what it does. I want to hide the Login form and show the registration form when Register link is clicked. The registration form also has a button in same manner which hides itself and brings the Login form in visual. The registration form also has a submit button which when clicked, fires the modal.
As I mentioned above, the modal is not popping when submit button from the Login form is clicked. But when I switch to registration form and click Submit there, it fires the modal. The more interesting thing is that when I switch back to the Login form and click submit there, it also shows the modal as expected. In short when the URL changes to myfile.php?#, everything works fine but when it is myfile.php or myfile.php?, I can't fire the Modal from Login form's submit button without switching the form for at least once.

Below code will launch modal window on button click. This is not the code that makes your logic to work but this will just pop up the modal window on button click.
Libraries used: jquery 2.1.1, Bootstrap 3.3.7
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">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">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
Reference: https://v4-alpha.getbootstrap.com/components/modal/

Give some time to submit the form and to show modal
you are doing same thing at same time, First show the modal and then submit the form
function myFunction()
{
setTimeout(function(){
$("#loginForm").submit(); // if you want
}, 2000);
return false;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="loginPanel">
<div class="myFormContainer">
<div class="myPanelHeadingContainer">
<h3 class="myPanelTitle">
Login
</h3>
<span id="flipper1">
Register
</span>
</div>
<div class="myPanelBody">
<form id="loginForm" >
<div class="form-group">
<label for="authCode">Authentication Code</label>
<input type="password" class="form-control" id="authCode" placeholder="Auth code" />
</div>
<button onclick="return myFunction();" class="btn btn-default" data-toggle="modal" data-target="#loadingModal">Submit</button>
</form>
</div>
</div>
</div>
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
loading
</div>
</div>
</div>
</div>
</body>
</html>

Related

Bootstrap modal opens automatically on page load, but how to disable if form is submitted

I have a newsletter modal setup, which works fine. I have it set to launch automatically on page load via some javascript code, but how could I make it so that it doesn't open if you successfully submitted the form inside the modal?
Javascript:
<script type="text/javascript">
$(window).on('load', function() {
$('#newsletter-modal').modal('show');
});
</script>
HTML Modal Code:
<div class="modal fade" id="newsletter-modal">
<div class="modal-dialog modal-lg">
<div class="modal-content primary-modal">
<div class="modal-header">
<h4 class="modal-title"><i class="fas fa-envelope-open-text primary-modal-icon"></i> Subscribe to our Newsletter</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: #fff;">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body primary-modal-body">
<form method="post" action="">
<div class="col-sm-12">
<div class="form-group col-md-6 col-md-offset-3 primary-modal-form">
<label class="justify-content-center" style="color: rgba(255,255,255,.55); text-align: center;">Your Name</label>
<input type="text" class="form-control" placeholder="John Doe" name="newsletter_name">
</div>
</div>
<div class="col-sm-12">
<div class="form-group col-md-6 col-md-offset-3 primary-modal-form">
<label style="color: rgba(255,255,255,.55); text-align: center;">Your Email</label>
<input type="email" class="form-control" placeholder="johndoe123#gmail.com" name="newsletter_email">
</div>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-default swalDefaultSuccess" name="signup_newsletter">Subscribe <i class="fas fa-arrow-circle-right primary-modal-subscribe-icon"></i></button>
</div>
</form>
</div>
</div>
</div>
</div>
Check this it will help you:
Dismiss Bootstrap Modal (Forever!) with jQuery Cookie, On Click
By doing it in PHP you prevent people from mucking about with the JS which is 'client-side'.
Additionally, you can only set the cookie if the subscribe works, ie after you've validated the email etc.
On the page PHP
if (isset($_POST['newsletter_email'])) {
//you subscribe stuff here
$_SESSION['subscribed']=true;
}
then wrap your modal js in
if (!isset($_SESSION['subscribed'])) {
///output your onload js.
}

Click function is not working in my web application

I have a modal for signup and signin. Inside signup modal when I want to go to signin modal from here and click to signin button then signup modal will hide and signin modal will appear. From same procedure happen to signin modal.
But here these signin or signup button inside the modal haven't work.
I have also used e.preventDefault(); inside the js function but still doesn't work.
I don't find out the script problem since I am not good in JS.
signin modal
<div class="modal fade bs-modal-sm" id="signin_modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<br>
<div class="bs-example bs-example-tabs">
<ul id="signin_myTab" class="nav nav-tabs">
<center><li id="signin_Modal_tab" class="active">SIGN IN</li></center>
</ul>
</div>
<div class="modal-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="signin">
<span id="student_signin_error"></span>
<form class="form-horizontal" id="signin_form">
<input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />
<fieldset>
<!-- Sign In Form -->
<!-- Email input-->
<div class="control-group">
<div class="controls">
<input required="" id="signin_email" name="email" class="col-ld-12 col-md-12 col-sm-12" type="email" placeholder="Email" class="input-medium">
</div>
</div>
<div class="control-group">
<div class="controls">
<input required="" id="signin_password" name="password" class="col-ld-12 col-md-12 col-sm-12" type="password" placeholder="Password" class="input-medium">
</div>
</div>
<!-- Button -->
<div class="control-group">
<div class="controls modal_submit_button">
<button type="button" class="btn btn-success" id="signin_form_submit_button">Sign In</button>
</div>
</div>
<div class="control-group">
<div class="controls modal_submit_button">
Don't have an account ! Click here to
Sign Up
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<center>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</center>
</div>
</div>
</div>
</div>
Script
$(document).ready(function(){
$('.signup_from_signin_modal').click(function(e) {
e.preventDefault();
$('#signin_Modal').modal('hide');
$('#myModal').modal('show');
});
});
If I called alert() inside that script function it will work.
But $('#signin_Modal').modal('hide'); this function doesn't work.
Anybody Help please ?
Thanks in advance.
You have accidentally in your jQuery selector put signin_Modal ,
instead you should be trying to select signin_modal .
This is just something that happens from time to time in coding, happy hacking :)

bootstrap modal1 is not close until modal2 close

I am trying to get a modal pop-up window from another modal pop-up
window. when i click the link from the first pop-up window, the second
pop-up window is opening, but the first one not getting closed.
I tried but not working properly.
Data target is not work because List item theme JavaScript is conflict.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
function showpopup(id)
{
$("#textid").val(id);
$("#myModal").modal('show');
//alert();
}
function forgotpopup()
{
$("#myModal").modal('hide');
$("#ForGot").modal('show');
}
</script>
<article>
<div id="main-wrapper" class="container">
<a class="btn btn-primary" value="" data-toggle="modal" class="btn btn-primary" onclick="showpopup(<?php echo $fetch_package['cID'];?>);" style=" background:#ee8f22 ;">CLICK HERE</a><br>
</div>
</article>
<div class="container">
<div class="modal fade" id="myModal" role="dialog" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<center><h4 class="modal-title">Login</h4></center>
</div>
<div class="modal-body" style="padding:30px 40px;">
<form role="form" method="post">
<div class="form-group">
<label for="usrname" style="font-weight: normal; font-size: 14px;">Username</label>
<input type="text" class="form-control" id="email_id" placeholder="Enter email" name="email_id" required>
</div>
<div class="form-group">
<label for="psw" style="font-weight: normal; font-size: 14px;"> Password </label>
<input type="password" class="form-control" name="password" id="password" placeholder="Enter password" required>
</div>
<div class="form-group pull-left" style="width:100%; border:0px solid ;">
<input type="checkbox" >
<label style="font-weight: normal; font-size: 14px; margin-top:-27px; margin-left:23px;"> Remember me</label>
</div>
<center>
<button type="submit" class="btn" style="margin-top:15px; background:#ee8f22 ;color:#fff; " name="submit">LOGIN</button>
<p> Forgot Password </p>
<p>Not a member? <a href="#" >Sign Up</a></p>
</center>
<input type="hidden" name="txtid" id="textid" value="">
</form>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="ForGot" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="text-align:center;">Forgot Password</h4>
</div>
<div class="modal-body">
<form role="form" method="post" id="reused_form">
<h6>Enter your email associated with your account to get link to reset the password.</h6>
<input type="text" required>
</form>
</div>
</div>
</div>
</div>
</div>

Bootstrap Modal Log-In Form Disappears Immediately?

I'm making a modal form that allows users to log in. As soon as I click on "Log In" the modal form appears and disappears.
Here is the button that calls the modal form. It is part of my navigation bar:
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
Modal Body:
<div class="modal fade" id="myModal" tableindex='-1'>
<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">Log-in</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input class="form-control" id="exampleInputEmail1" placeholder="Enter email" type="email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input class="form-control" id="exampleInputPassword1" placeholder="Password" type="password">
</div>
</div>
<div class="modal-footer">
Close
Log-in
</div>
</div>
</div>
</div>
This code works for me on jsBin.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
<div class="modal fade" id="myModal" tableindex='-1'>
<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">Log-in</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input class="form-control" id="exampleInputEmail1" placeholder="Enter email" type="email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input class="form-control" id="exampleInputPassword1" placeholder="Password" type="password">
</div>
</div>
<div class="modal-footer">
Close
Log-in
</div>
</div>
</div>
</div>
</body>
</html>
Sounds like you may be loading the JavaScript for Bootstrap Modal twice. Are you possibly loading bootstrap.js as well as bootstrap-modal.js? Or both bootstrap.js and bootstrap.min.js?

Bootstrap model covered by modal backdrop

I have simple html page to show bootstrap modal, however when I launch the model -
it gets covered by modal backdrop,
I checked the z- index of myModal - 1040 and that of modal backdrop is 1030
checked all posts in stackoverflow but none of them solve my issue
please help
<html>
<head>
<link href="" rel="stylesheet">
<link href="Content/bootstrap.min.css" rel="stylesheet">
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</head>
<body>
Launch demo modal
<div id="myModal" class="modal hide fade in" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h3 id="myModalLabel">Log in</h3>
</div>
<div class="modal-body">
<form class="modal-form" id="loginform">
<input type="text" name="username" placeholder="login" id="username">
<input type="text" name="password" placeholder="password" id="userpassword">
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-success">Login</button>
</div>
</div>
</body>
</html>​
You forgot a few things, which are:
the <div class="modal-dialog">
the <div class="modal-content">
You also added some unecessary things which are:
the hide class on the <div id="myModal" class="modal fade in" aria-hidden="true">
the in class on the <div id="myModal" class="modal fade in" aria-hidden="true">
Your working code will look like this:
Launch demo modal
<div id="myModal" class="modal fade in" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h3 id="myModalLabel">Log in</h3>
</div>
<div class="modal-body">
<form class="modal-form" id="loginform">
<input type="text" name="username" placeholder="login" id="username">
<input type="text" name="password" placeholder="password" id="userpassword">
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-success">Login</button>
</div>
</div>
</div>
</div>
Here's a JsFiddle to show it in a working environment.
To read everything about the modal, please check this
Hope this helps!
Remove the hide class from your modal.
JSFdiddle
Launch demo modal
<div id="myModal" class="modal fade in" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h3 id="myModalLabel">Log in</h3>
</div>
<div class="modal-body">
<form class="modal-form" id="loginform">
<input type="text" name="username" placeholder="login" id="username">
<input type="text" name="password" placeholder="password" id="userpassword">
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-success">Login</button>
</div>
</div>

Categories