我正在使用Ajax成功调用中显示的引导程序模式。
我有2个问题。
1)所有内容均已显示并正常工作,但表单字段看起来不像常规模式那样集中。
2)正则表达式不适用于表格字段?
问题出在哪里?
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>
<a href="#forgotpassword" data-toggle="tab">Forgot Password?</a>
</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>
<a href="#login" data-toggle="tab">Wait, I remember it now!</a>
</p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<a href="mainPage.php" class="btn btn-danger btn-default pull-left"><span class="glyphicon glyphicon-remove"></span> Not now!</a>
</div>
</div>
</div>
</div>
</div>
最佳答案
您错过了添加modal-content
并将modal-header
和modal-body
包装到其中的问题。modal-content
是包含style
background-color
的一个。以下是您的更改。
<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>
<a href="#forgotpassword" data-toggle="tab">Forgot Password?</a>
</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>
<a href="#login" data-toggle="tab">Wait, I remember it now!</a>
</p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>