Question

我正在使用Bootstrap，我有一个注册表。单击注册按钮时，我调用ajax发送表单。当远程页面正在执行时，我想用一个带有“请稍候”等消息的div覆盖表单如何覆盖具有确切大小的行。这是我的表格：

<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"><a href="connexion.php" class="btn btn-success btn-block btn-lg">Login</a></div>
        </div>
    </form>
</div>

http://jsfiddle.net/stjyjgmb/

Answer 1

你在ajax中设置了“请等待”课程。

CSS代码

.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"><a href="connexion.php" class="btn btn-success btn-block btn-lg">Login</a></div>
			</div>
                 <div class="please-wait"><div class="please-wait-text">
                    Please Wait...
                </div></div>
		</form>
	</div>
</div>

Demo

覆盖bootstrap div行

1 个答案: