簡體   English   中英

引導網頁中的兩種模型彈出窗口

[英]Two model Popup in bootstrap webpage

在此處輸入圖片說明

![登錄彈出窗口

注冊彈出

當我在網站上單擊“登錄”按鈕時,我使用了兩種彈出式模型。一個登錄式彈出模型將打開...如果用戶未注冊,它將要求創建帳戶...我在登錄中給出了一個href,它將打開另一個彈出式窗口然后關閉第一個...第二個彈出窗口也是一樣。當用戶位於第二個彈出窗口中時,還有另一個href登錄...

登錄彈出窗口模型的代碼開始

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

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM