[英]Two model Popup in bootstrap webpage
在此處輸入圖片說明
登錄彈出窗口模型的代碼開始
<div class="modal fade" id="signIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="colorStrips">
<div class="col-sm-3 colorStrips1">
</div>
<div class="col-sm-3 colorStrips2">
</div>
<div class="col-sm-3 colorStrips3">
</div>
<div class="col-sm-3 colorStrips4">
</div>
</div>
<div class="modal-body model-padding">
<!-- <div class="col-sm-6"> -->
<div class="form-group form-area">
<input type="email" class= "form-control form-field" id="popupSignInEmail" placeholder="Email Address">
</div>
<div class="form-group form-area">
<input type="password" class= "form-control form-field" id="popupSignInEmail" placeholder="Password">
</div>
<div class="one-block-item form-inline">
<div class="checkbox col-sm-6">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<div class="col-sm-offset-2 col-sm-4">
<a href="#forgotPwd">Forgot Pasword ? </a>
</div>
</div>
<div class="radial-signin">
<center>
<a type="submit" href="#signInData" class="btn btn-signin wow fadeInUp" data-wow-duration="1200ms" data-wow-delay="300ms" data-role="popup-link wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="800ms">SIGN IN</a>
</center>
</div>
<!-- </div> -->
<div class="toggleTosignUp">
<center>
<span class="textofsignin">Are you a new user ? <a onclick="launch_modal('#signUp');" data-toggle="modal" href="#signUp" id="signUpClicked" class="markuptext-S">Create Account</a>
</center>
</div>
</div>
</div>
</div>
</div>
注冊彈出窗口代碼
<div class="modal fade" id="signUp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="colorStrips">
<div class="col-sm-3 colorStrips1">
</div>
<div class="col-sm-3 colorStrips2">
</div>
<div class="col-sm-3 colorStrips3">
</div>
<div class="col-sm-3 colorStrips4">
</div>
</div>
<div class="modal-body model-padding">
<!-- <div class="col-sm-6"> -->
<div class="form-group form-area">
<input type="email" class= "form-control form-field" id="popupSignInEmail" placeholder="Email Address">
</div>
<div class="form-group form-area">
<input type="password" class= "form-control form-field" id="popupSignInEmail" placeholder="Password">
</div>
<div class="one-block-item form-inline">
<div class="checkbox col-sm-6">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<div class="col-sm-offset-2 col-sm-4">
<a href="#forgotPwd">Forgot Pasword ? </a>
</div>
</div>
<div class="radial-signin">
<center>
<a type="submit" href="#signInData" class="btn btn-signin wow fadeInUp" data-wow-duration="1200ms" data-wow-delay="300ms" data-role="popup-link wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="800ms">SIGN IN</a>
</center>
</div>
<!-- </div> -->
<div>
<center class="toggleTosignIn">
<span class="textofsignin">Already have an account ?<a onclick="launch_modal('#signIn');" href="javascript:void(null);" class="markuptext-S" id="signInClicked">Sign In</a>
</center>
</div>
</div>
</div>
</div>
</div>
我已經嘗試了Following JS:
function launch_modal(id) {
$('.modal').modal('hide');
$('#'+id).modal('show');
$('body').css({"padding-right" : "0 !important"});
}
$('#signIn').on('show.bs.modal', function (e) {
$('body').addClass('test');
});
$('#signUp').on('show.bs.modal', function (e) {
$('body').addClass('test');
});
現在要解決的問題是:我第一次去第二個模型時已關閉。 但是當我想進入First Model時,即從Second彈出窗口中簽到彈出窗口,即signUp彈出窗口時,它就不能這樣做。
從選擇器中刪除#:
function launch_modal(id) {
$('.modal').not(id).modal('hide');
$(id).modal('show');
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.