Comments (7)
could you re ask this on the mailing list? thanks!
from bootstrap.
Check out http://nikku.github.com/jquery-bootstrap-scripting/.
The script can do it out of the box.
from bootstrap.
👍
from bootstrap.
When the user presses "Enter" in an input field I am getting that the modal disappears, and the form isn't submitted. I'm not sure why. I've also tried prevent the keydown event from bubbling when "Enter" is pressed (using stopImmediatePropagation), but the problem persists.
from bootstrap.
Could be great, adding some specific "forms examples" on http://paynedigital.com/2011/11/bootbox-js-alert-confirm-dialogs-for-twitter-bootstrap or
from bootstrap.
@dmvaldman: Same problem here. I hope it will be fixed soon!
from bootstrap.
After spending way to much time on this, i got it! This is what i did: (First some background, im using the modal for a login form) Also theres no need for bootstrap-scripting for this to work. i was going to use it if i couldn't get it any other way, and it turns out you dont need it. :)
- The button that calls the modal should be as follows
button class="btn btn-primary" data-toggle="modal" href="#dia_login" id="btn_login"> Login /button>
(i cant get github to show the correct button code, just add the < at the beginning and end tag)
The key this is the code: data-toggle="modal" . You'll see in the JS you dont need to make the modal visible.
- the JS
$(document).ready(function(){
$('#dia_login').modal('hide');
$('#btn_login').click(function() {
// $('#dia_login').modal('show'); //---> this does nothing b/c of the calling button has (data-toggle="modal") set
});
$('#dia_login').on('shown', function () {
$("#txt_email").focus();
})
$("#txt_password").keypress(function(e) {
if(e.which == 13) {
$('#frm_login').submit();
}
});
});
- The form
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>User Login</h3>
</div>
<div class="modal-body">
<div class="control-group">
<label class="control-label" for="txt_email">Email:</label>
<div class="controls">
<input class="input-large" id="txt_email" name="txt_email" type="text" placeholder="Email" maxlength="60" size="30">
<p class="help-block"></p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="txt_password">Password:</label>
<div class="controls">
<input type="password" class="input-large" id="txt_password" name="txt_password" placeholder="Password" maxlength="60" size="30">
<p class="help-block"><a href="/password_forgot.php">Forgot Password</a></p>
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn">Cancel</a>
<input type="submit" id="btn_login" name="btn_login" value="Login" class="btn btn-primary" />
</div>
</form>
Thats all you should need. I hope this helps someone trying to do this!
from bootstrap.
Related Issues (20)
- Horizontal tabs: Down and Up Arrows usage not allowed HOT 1
- Modal and offcanvas page content jumping vertically HOT 2
- Base Bootstrap on TailwindCSS HOT 1
- dart-sass error since bootstrap 5.3.3 HOT 1
- Column width auto is not always spaced evenly HOT 4
- In .btn class font-family is missing in bootstrap v5.3.3 HOT 1
- Dark dropdowns/navbars don't get dark variables with dark theme HOT 3
- d-sm-none not working in ul HOT 2
- Offcanvas and Modal open and close immediately on some touch devices HOT 2
- Inaccessible Bootstrap CDN Link - Privacy Error (?)
- Add global configuration and methods to enable the use of `calc` by default in numeric operations HOT 2
- Chrome/Edge default color-scheme scrollbars HOT 1
- Could you integrate popper.min.js as well? Right now popper is not available as a package for composer. HOT 3
- Dark Mode HTML tag Attribute is incorrect in the DOCUMENTATION and elsewhere on the web for Bootstrap 5.3.0+ HOT 1
- Navs and Tabs - Tabs doesn't work correctly when nav-links are anchors <a> HOT 1
- input group with nested dropdown differs from btn group
- Don't know why this issue was closed
- Wrong border radius first element in `btn-group-vertical` is a dropdown HOT 1
- New button class: btn-neutral HOT 1
- [Docs] Form inside modal
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bootstrap.