Bootstrap Modal showing with Transparent Background

Question

I am using bootstrap modal that i am showing on ajax success call. I have 2 issues. 1) All the contents are showing and working but the form fields looks not focused as it happens in normal modal.

2) the regex not applying in the form field ?

Where is the issue?

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

You've missed to add modal-content and wrap the modal-header and modal-body into it.. modal-content is the one which contains style background-color. Below would be your changes.

<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>