>我有这个:
<div class="row" style="display:none" id="divRegistration">
<div class="col-xs-6">
<div class="well">
<div class="form-group">
<label asp-for="EmailAddress" class="control-label"></label>
<input type="text" class="form-control" id="EmailAddress" name="EmailAddress" value="@Model.EmailAddress" required="" title="Please enter you username" placeholder="example@gmail.com">
<span class="help-block"></span>
</div>
<div class="form-group">
<label asp-for="Password" class="control-label">Password</label>
<input type="password" class="form-control" id="Password" name="Password" value="@Model.Password" required="" title="Please enter your password">
<span class="help-block"></span>
</div>
<div class="form-group">
<label asp-for="ConfirmPassword" class="control-label"></label>
<input type="password" class="form-control" id="ConfirmPassword" name="ConfirmPassword" value="@Model.ConfirmPassword" required="" title="Please confirm your password">
</div>
<div id="registerErrorMsg" class="alert alert-error hide">Invalid registration</div>
<a onclick="Register();" class="btn btn-success btn-block">Register</a>
</div>
</div>
<div class="col-xs-6">
<p class="lead">Already Registered?</p>
<p><a onclick="showLogInPage();" class="btn btn-info btn-block">LogIn</a></p>
</div>
</div>
(我已经尝试了所有这些(
function Register() {
$('#registerErrorMsg').html('hi andy!');
$("#registerErrorMsg").css("display", "none");
$('#registerErrorMsg').fadeIn();
$('#registerErrorMsg').show();
alert('hi');
}
我的警报框显示,但我的标签没有?
我的警报框显示,但我的标签没有?
发生这种情况是因为类隐藏在 boostrap 中定义为:
.hide {
display: none !important;
}
因此,删除此类(.removeClass((或.toggleClass(((就足够了。
更改自:
function Register() {
$('#registerErrorMsg').html('hi andy!');
$("#registerErrorMsg").css("display", "none");
$('#registerErrorMsg').fadeIn();
$('#registerErrorMsg').show();
alert('hi');
}
自:
function Register() {
$('#registerErrorMsg').html('hi andy!');
// $("#registerErrorMsg").removeClass('hide');
// ...or
$("#registerErrorMsg").toggleClass('hide');
}
function Register() {
$('#registerErrorMsg').html('hi andy!');
//$("#registerErrorMsg").removeClass('hide');
$("#registerErrorMsg").toggleClass('hide');
}
$("#divRegistration").show();
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row" style="display:none" id="divRegistration">
<div class="col-xs-6">
<div class="well">
<div class="form-group">
<label asp-for="EmailAddress" class="control-label"></label>
<input type="text" class="form-control" id="EmailAddress" name="EmailAddress" value="@Model.EmailAddress" required="" title="Please enter you username" placeholder="example@gmail.com">
<span class="help-block"></span>
</div>
<div class="form-group">
<label asp-for="Password" class="control-label">Password</label>
<input type="password" class="form-control" id="Password" name="Password" value="@Model.Password" required="" title="Please enter your password">
<span class="help-block"></span>
</div>
<div class="form-group">
<label asp-for="ConfirmPassword" class="control-label"></label>
<input type="password" class="form-control" id="ConfirmPassword" name="ConfirmPassword" value="@Model.ConfirmPassword" required="" title="Please confirm your password">
</div>
<div id="registerErrorMsg" class="alert alert-error hide">Invalid registration</div>
<a onclick="Register();" class="btn btn-success btn-block">Register</a>
</div>
</div>
<div class="col-xs-6">
<p class="lead">Already Registered?</p>
<p><a onclick="showLogInPage();" class="btn btn-info btn-block">LogIn</a></p>
</div>
</div>
请参阅下面的代码片段: 首先,您需要更改:
<div id="registerErrorMsg" class="alert alert-error hide">Invalid registration</div>
进入此声明:
<div id="registerErrorMsg" class="alert alert-error" style="display:none">Invalid registration</div>
然后将脚本更改为:
function Register() {
$('#registerErrorMsg').html('hi andy!');
$("#registerErrorMsg").css("display", "block");
$('#registerErrorMsg').fadeIn();
$('#registerErrorMsg').show();
alert('hi');
}
$("#registerErrorMsg").css("display", "block");
会将alert div
样式从none
更改为block
,因此将显示您的警报。
function Register() {
$('#registerErrorMsg').html('hi andy!');
$("#registerErrorMsg").css("display", "block");
$('#registerErrorMsg').fadeIn();
$('#registerErrorMsg').show();
alert('hi');
}
<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.7/css/bootstrap.min.css">
<div class="row" id="divRegistration">
<div class="col-xs-6">
<div class="well">
<div class="form-group">
<label asp-for="EmailAddress" class="control-label"></label>
<input type="text" class="form-control" id="EmailAddress" name="EmailAddress" value="@Model.EmailAddress" required="" title="Please enter you username" placeholder="example@gmail.com">
<span class="help-block"></span>
</div>
<div class="form-group">
<label asp-for="Password" class="control-label">Password</label>
<input type="password" class="form-control" id="Password" name="Password" value="@Model.Password" required="" title="Please enter your password">
<span class="help-block"></span>
</div>
<div class="form-group">
<label asp-for="ConfirmPassword" class="control-label"></label>
<input type="password" class="form-control" id="ConfirmPassword" name="ConfirmPassword" value="@Model.ConfirmPassword" required="" title="Please confirm your password">
</div>
<div id="registerErrorMsg" class="alert alert-info" style="display:none">Invalid registration</div>
<a onclick="Register();" class="btn btn-success btn-block">Register</a>
</div>
</div>
<div class="col-xs-6">
<p class="lead">Already Registered?</p>
<p><a onclick="showLogInPage();" class="btn btn-info btn-block">LogIn</a></p>
</div>
</div>