带有透明背景的Bootstrap模式显示

Question

我正在使用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">&times;</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>

Answer 1

您已经错过了添加modal-content并将modal-header和modal-body包裹到其中的情况modal-content是一种包含background-color style modal-content 。 以下是您的更改。

<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">&times;</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>