Overlay bootstrap div row - twitter-bootstrap-3

Question

I'm using Bootstrap, I have a registration form. When register button is clicked, I call ajax to send the form. While remote page is executing, I'd like to overlay the form with a div with a message like "Please wait" How can I overlay the row with exact size.
This is my form:
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
<form id="forminscr" method="post">
<h2>Registration <small></small></h2>
<hr class="colorgraph">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="name" id="name" class="form-control input-lg" placeholder="Name" tabindex="1">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="surname" id="surname" class="form-control input-lg" placeholder="Surname" tabindex="2">
</div>
</div>
</div>
<div class="form-group">
<input type="text" name="company" id="company" class="form-control input-lg" placeholder="Company" tabindex="3">
</div>
<div class="form-group">
<input type="email" name="email" id="email" class="form-control input-lg" placeholder="Adresse email" tabindex="4">
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="mdp" id="mdp" class="form-control input-lg" placeholder="Mot de passe" tabindex="5">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="mdp2" id="mdp2" class="form-control input-lg" placeholder="Confirmer" tabindex="6">
</div>
</div>
</div>
<hr class="colorgraph">
<div class="row">
<div class="col-xs-12 col-md-6"><input type="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="7"></div>
<div class="col-xs-12 col-md-6">Login</div>
</div>
</form>
</div>
http://jsfiddle.net/stjyjgmb/

Answer 1

you set "please-wait" class in your ajax.
CSS Code
.please-wait{
background-color: rgba(0, 0, 0, 0.8);
bottom: 0;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 99;
display:none;
}
.please-wait-text{
border: 1px solid #ffffff;
border-radius: 4px;
color: #ffffff;
float: left;
font-size: 22px;
left: 38%;
padding: 20px;
position: absolute;
top: 40%;
width: auto;
}
Js Code
$( document ).ready(function() {
setTimeout(function(){
$('.please-wait').show();
}, 3000);
});
[
// A $( document ).ready() block.
$( document ).ready(function() {
setTimeout(function(){
$('.please-wait').hide();
}, 3000);
});
.please-wait{
background-color: rgba(0, 0, 0, 0.8);
bottom: 0;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 99;
}
.please-wait-text{
border: 1px solid #ffffff;
border-radius: 4px;
color: #ffffff;
float: left;
font-size: 22px;
left: 38%;
padding: 20px;
position: absolute;
top: 40%;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
<form id="forminscr" method="post">
<h2>Registration <small></small></h2>
<hr class="colorgraph">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="name" id="name" class="form-control input-lg" placeholder="Name" tabindex="1">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="surname" id="surname" class="form-control input-lg" placeholder="Surname" tabindex="2">
</div>
</div>
</div>
<div class="form-group">
<input type="text" name="company" id="company" class="form-control input-lg" placeholder="Company" tabindex="3">
</div>
<div class="form-group">
<input type="email" name="email" id="email" class="form-control input-lg" placeholder="Email" tabindex="4">
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="mdp" id="mdp" class="form-control input-lg" placeholder="Password" tabindex="5">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="mdp2" id="mdp2" class="form-control input-lg" placeholder="Confirm" tabindex="6">
</div>
</div>
</div>
<hr class="colorgraph">
<div class="row">
<div class="col-xs-12 col-md-6"><input type="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="7"></div>
<div class="col-xs-12 col-md-6">Login</div>
</div>
<div class="please-wait"><div class="please-wait-text">
Please Wait...
</div></div>
</form>
</div>
</div>
Demo