Bootstrap Modal code
<!-- Signup Modal -->
<div class="modal fade" id="signUpForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<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>
<h3 class="modal-title" id="myModalLabel">Please Sing Up</h3>
</div>
<div class="modal-body">
<?php echo form_open('Registration')?>
<div class="form-group">
<label for="login-email" class="control-label">Email:</label>
<input type="text" class="form-control" name="login-email" id="login-email">
</div>
<div class="form-group">
<label for="username" class="control-label">Username:</label>
<input type="text" class="form-control" name="username" id="username">
</div>
<div class="form-group">
<label for="password" class="control-label">Password:</label>
<input type="password" class="form-control" name="password" id="password">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Signup</button>
</div>
<?php echo form_close()?>
</div>
</div>
</div>
And I have controller named Registration. when I click on button to launch the modal nothing happens. Button code that launches the modal.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signUpForm">Signup
</button>
You should add jQuery bootstrap "REQUEST"
More info here http://getbootstrap.com/2.3.2/javascript.html#modals
Add reference to jquery and bootstrap.min.js files in header and also add links for bootstrap css files.
Related
I am working on a modal that has a cancel button but if the cancel button is pressed, the user will be prompted to choose if they want to go back or stay. When the confirmation comes up and you select 'Ok', the modal exits as it should but I noticed that if you select 'No, don't go back', it still exits the modal. Is there any workaround for this?
Here's my modal code:
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Enter your Subject</h5>
</div>
<form action="/save-energystores" method="POST">
{{ csrf_field() }}
<div class="modal-body">
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Subject ID:</label>
<input type="text" name="subjectid" class="form-control" id="recipient-name" maxlength="6" style="text-transform:uppercase" required />
</div>
<div class="mb-3">
<label for="message-text" class="col-form-label">Description:</label>
<textarea name="energystore_detail" class="form-control" id="message-text" required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="return confirm('Do you really want to quit?');">Close</button>
<button type="submit" class="btn btn-primary">Add</button>
</div>
</form>
</div>
</div>
</div>
I am building a simple little personal site, and for the site I am making a modal contact form with Bootstrap. When I open the modal and click on any of the form fields, I am immediately redirected to the Forbidden page and see the error message "You don't have permission to access /none" on this server.". I can't for the life of me understand why this would happen. Below is the form modal:
<div class="modal fade" id="contact-form" tabindex="-1" role="dialog" aria-labelledby="contact-form" aria-hidden="true" style="color:darkslategray;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Shoot me a message!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Contact form -->
<form method="POST" action="index.php">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control mb-4" id="name" />
<label for="email">Email Address:</label>
<input type="email" class="form-control mb-4" name="email" id="email" />
<label for="message">Message:</label>
<textarea class="form-control mb-4" name="message" id="message"></textarea>
</div>
<button type="submit" class="btn btn-primary">Send</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
And below is the HTML for the link that triggers the modal:
<p>Want to chat? <span class="contact" data-toggle="modal" data-target="#contact-form">Contact me</span>.</p>
Could someone please help me understand why this is happening and how I can fix it? Many thanks in advance.
I have the following code on 2 pages:
<input class="btn btn-primary" type="button" value="Sign Up" data-toggle="modal" data-target="#myModal"/>
<!-- my modal dialog-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Create New User</h4>
</div>
<div class="modal-body">
<form id="myform" action="add_user.php" method="POST">
<div class="form-group">
<input class="form-control" type="text" id="username" name="username" placeholder="Username"/>
</div>
<div class="form-group">
<input class="form-control" type="password" id="password-input" name="password" placeholder="Password"/>
</div>
<div class="form-group">
<input class="form-control" type="password" id="password-confirm-input" placeholder="Confirm Password" onblur=";"/>
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="User Type"/>
</div>
<div class="form-group" id="msg">
<input class="form-control" type="text" name=email placeholder="E-mail Address"/>
</div>
<div>
<label id="label" for="male"></label>
</div>
<br>
<div class="form-group pull-right">
<input class="btn btn-success" type="submit" id="create_user2" value="Create User"/>
</div>
</form>
</div>
</div>
</div>
</div>
This code works on the index.php page, a modal dialog pops up.
in another page, dashboard.php, it does not.
I have the exact same button and modal code in the body tags
Be sure you have bootstrap JS references in both pages:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
I have a navbar that looks like this:
When I try and shrink the page to simulate a mobile device however, it doesn't collapse quite right:
It's supposed to collapse so that the button that is sort of hidden behind the "Register" text becomes the toggle for the menu. Here is my code:
<div class="sticky-header-navbar-container">
<div class="well">
<div class="navbar navbar-default navbar-fixed-top navbar-collapse navHeaderCollapse" id="navbar">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar">Home</span>
<span class="icon-bar">About</span>
<span class="icon-bar">Contact</span>
<span class="icon-bar">Playground</span>
<span class="icon-bar">Login</span>
<span class="icon-bar"><a href="#" class="tooltip-bottom" data-toggle="modal" data-target="#registration-modal"
data-tooltip="Only Required to Comment and Rate!">Want to Register? Click Here!</a></span>
</button>
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Playground
</li>
<li>
<form class="navbar-form" role="search">
<div class="input-group" style="width: 100%">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term-header">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
Login
</li>
<li style="padding-right: 20px">
<a href="#" class="tooltip-bottom" data-toggle="modal" data-target="#registration-modal"
data-tooltip="Only Required to Comment and Rate!">Want to Register? Click Here!</a>
</li>
</ul>
</div>
</div>
</div>
<div id="about-modal" class="modal fade" 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">About This Page</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="contact-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Contact Us!</h4>
</div>
<div class="modal-body">
<p>Got any Feedback (Positive and/or Negative) or any ideas? Please let us know!</p>
<p>Your email is only used to contact you back with an answer. We will never spam your email (Promise!)</p>
<div class="form-group">
<form role="form">
<div class="form-group">
<label for="contact-name" class="sr-only">Your Name</label>
<input type="text" id="contact-name" class="form-control" placeholder="Your Name" required>
</div>
<div class="form-group">
<label for="contact-email" class="sr-only">Your Email</label>
<input type="email" id="contact-email" class="form-control" placeholder="Your Email" required>
</div>
<div class="form-group">
<textarea id="contact-message" class="form-control" rows="6" cols="50" placeholder="Your message..." required></textarea>
</div>
<button type="button" class="btn btn-success btn-bg" id="contact-submit-btn"><span>Submit</span></button>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="login-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login with Github!</h4>
</div>
<div class="modal-body">
<form class="navbar-form">
<label for="login-inputEmail" class="sr-only">Email address</label>
<input type="email" id="login-inputEmail" class="form-control" placeholder="Email Address" required>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="separator" style="padding-bottom: 15px"></div>
<div class="checkbox" style="padding-right: 15px;padding-left: 10px">
<label>
<input type="checkbox" value="remember-me">
Remember Me
</label>
</div>
<button type="button" class="btn btn-success btn-bg" id="signin-btn"><span class="glyphicon glyphicon-log-in"></span></button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="registration-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">How To Register</h4>
</div>
<div class="modal-body">
<p>In order to log in you need a Github account as we use that for log in here.</p>
<p>If you already registered for a Github account then press the Login button and log in using your Github Credentials.</p>
<p>If you have yet to register Click Here!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
If that's all the related code then you shouldn't need anything outside the default classes.
See Default Navbar Docs.
You shouldn't need these modal links in the header and then again within the navbars links, these are whats covering up the mobile toggle button.
And your HTML structure is off and/or missing some pieces. Again if you refer to the Docs you'll see the inconsistencies, you need to put your toggle button inside the navbar-header class, navbar-form does not belong inside of a li item etc.
See working example Snippet.
*Note that because you links that utilize a lot of space at around 875px you'll see your navbar overflow to a new line (a CSS media query turns the background red when this happens in my example). One solution is to reduce the length of the link title(s) to prevent this:
ie Want to Register? Click Here! to just Register!.
#media (max-width: 875px) {
html,
body {
background: red;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li> Home
</li>
<li> About
</li>
<li> Contact
</li>
<li> Playground
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term-header"> <span class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li> Login
</li>
<li> Want to Register? Click Here!
</li>
</ul>
</div>
</div>
</nav>
<div id="about-modal" class="modal fade" 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">About This Page</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="contact-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Contact Us!</h4>
</div>
<div class="modal-body">
<p>Got any Feedback (Positive and/or Negative) or any ideas? Please let us know!</p>
<p>Your email is only used to contact you back with an answer. We will never spam your email (Promise!)</p>
<div class="form-group">
<form role="form">
<div class="form-group">
<label for="contact-name" class="sr-only">Your Name</label>
<input type="text" id="contact-name" class="form-control" placeholder="Your Name" required>
</div>
<div class="form-group">
<label for="contact-email" class="sr-only">Your Email</label>
<input type="email" id="contact-email" class="form-control" placeholder="Your Email" required>
</div>
<div class="form-group">
<textarea id="contact-message" class="form-control" rows="6" cols="50" placeholder="Your message..." required></textarea>
</div>
<button type="button" class="btn btn-success btn-bg" id="contact-submit-btn"><span>Submit</span>
</button>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="login-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login with Github!</h4>
</div>
<div class="modal-body">
<form class="navbar-form">
<label for="login-inputEmail" class="sr-only">Email address</label>
<input type="email" id="login-inputEmail" class="form-control" placeholder="Email Address" required>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="separator" style="padding-bottom: 15px"></div>
<div class="checkbox" style="padding-right: 15px;padding-left: 10px">
<label>
<input type="checkbox" value="remember-me">Remember Me</label>
</div>
<button type="button" class="btn btn-success btn-bg" id="signin-btn"><span class="glyphicon glyphicon-log-in"></span>
</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="registration-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">How To Register</h4>
</div>
<div class="modal-body">
<p>In order to log in you need a Github account as we use that for log in here.</p>
<p>If you already registered for a Github account then press the Login button and log in using your Github Credentials.</p>
<p>If you have yet to register Click Here!
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I have the following modal and when user clicks on Submit, I want to redirect to another page.
My HTML Code:
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Add new card</h4>
</div>
<form action="addCard" method="post" id="addcard" class="form-horizontal" role="form">
<div class="modal-body" style="height: 190px;">
<div class="form-group" style="height: 30px;">
<label for="title" class="col-md-3 control-label">Title</label>
<div class="col-md-9">
<input type="text" class="form-control" name="title" placeholder="Enter Card title here...">
</div>
</div>
<div class="form-group" style="height: 30px; margin-bottom:30px;">
<label for="title" class="col-md-3 control-label">Description</label>
<div class="col-md-9">
<textarea class="form-control" name="desc" placeholder="Enter Card description here..."></textarea>
</div>
</div>
<div class="form-group">
<label for="priority" class="col-md-3 control-label">Priority</label>
<div class="col-md-9">
<select name="priority" class="form-control">
<option value="critical">Critical</option>
<option value="high">High</option>
<option value="normal">Normal</option>
<option value="low">Low</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="formSubmit" type="submit">Submit</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
app.js:
app.post('/addCard', routes.addCard);
index.js:
exports.addCard = function (req,res)
{
res.render('index');
}
When I click on 'Submit' button of the modal, no action is happening. Please advice. Thanks.
in
<button type="button" class="btn btn-primary" id="formSubmit" type="submit">Submit</button>
you have type=button ,and then type=submit
remove type=button