Javascript Question

Bootstrap Modal showing with Transparent Background

enter image description here

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

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