使用jQuery HTML替换在两个内容之间切换

Question

我有两个弹出窗口（登录和注册），我希望能够通过跨度上的click事件在它们之间进行切换。

它第一次工作，但是当我想从第二个弹出窗口切换到第一个弹出窗口时，单击事件不会触发，这意味着我转到第二个弹出窗口后无法转到第一个弹出窗口。

我搜索了一下，发现与元素相关的click事件丢失了，但仍然无法实现解决方案。

-如何在跨度单击事件（registerform和loginform类）上根据需要在两次之间切换？

HTML：

<div id="myModal" class="modal">
    @include('frontoffice.login_popup')
</div>

首次加载登录视图时：

    <div class="modal-content">
    <span class="close">&times;</span>
    <div class="popup-form">
        <div class="popup_title">
            OLÁ DE NOVO, LUZINHA !
        </div>
            <p class="popupcontent"> Se ainda não pertences á familia wolistic, <br> regista-te <span class="registerform orange"> aqui </span> </p>
                {{ Form::open(array('method'=>'post','class'=> 'popup_form', 'url'=>'/customer_login')) }}
                    <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                    <input id="email" type="email" class="form-control popupinput" name="email" value="{{ old('email') }}" required autofocus>
                    @if ($errors->has('email'))
                        <span class="help-block">
                            <strong>{{ $errors->first('email') }}</strong>
                        </span>
                    @endif
                    </div>
                    <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                            <input id="password" type="password" class="form-control popupinput" name="password" required>
                                @if ($errors->has('password'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('password') }}</strong>
                                </span>
                                @endif
                    </div>
                    <div class="form-group popsubmit">
                        <button type="submit" class="btn btn-primary">INICIAR SESSÃO</button>
                    </div>
                    <p class="text_forgotpassword"> Esqueceste a password? Nós ajudamos, clica <span class="orange"> aqui! </span> </p>
                {{Form::close()}}
        </div>
</div>

注册视图：

<!-- Modal content -->
  <div class="modal-content" style="height: 65%">
    <span class="close">&times;</span>
      <div class="popup-form">
          <div class="popup_title">
              JUNTA-TE À FAMILIA WOLISTIC
          </div>
              <p class="popupcontent"> Já fazes parte ? Conecta-te <span class="loginform orange"> aqui </span> </p>
                  {{ Form::open(array('method'=>'post','class'=> 'popup_form', 'url'=>'/customer_register')) }}
                          <div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
                              <input id="name" type="text" class="form-control popupinput" placeholder="Nome" name="name" value="{{ old('name') }}" required autofocus>

                              @if ($errors->has('name'))
                                  <span class="help-block">
                                      <strong>{{ $errors->first('name') }}</strong>
                                  </span>
                              @endif
                      </div>

                      <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                              <input id="email" type="email" class="form-control popupinput" placeholder="E-mail" name="email" value="{{ old('email') }}" required>

                              @if ($errors->has('email'))
                                  <span class="help-block">
                                      <strong>{{ $errors->first('email') }}</strong>
                                  </span>
                              @endif
                      </div>

                      <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                              <input id="password" type="password" class="form-control popupinput" placeholder="Password" name="password" required>

                              @if ($errors->has('password'))
                                  <span class="help-block">
                                      <strong>{{ $errors->first('password') }}</strong>
                                  </span>
                              @endif
                      </div>

                      <div class="form-group">
                              <input id="password-confirm" type="password" class="form-control popupinput" placeholder="Repetir Password" name="password_confirmation" required>
                      </div>

                      <div class="form-group">
                          <div class="interests_list register_list">
                                <div>
                                    <input type="checkbox" id="agree" name="agree"/>
                                    <label for="agree"><span></span> Li e concordo com os termos e condições </label>
                                </div>   
                                <div>
                                    <input type="checkbox" id="sub" name="sub"/>
                                    <label for="sub"><span></span> Quero subscrever a newsletter </label>
                                </div>   
                          </div>
                      </div>

                      <div class="form-group popsubmit">
                                    <button type="submit" class="btn btn-primary">REGISTAR</button>
                      </div>
                  {{ Form::close() }}
        </div>
    </div>
  </div>

JS：

$(".registerform").click(function(){
    $.get(
        "/registerform",
        function (data) {
            $("#myModal").html(data);
        }
    );
});

$(".loginform").click(function(){
    $.get(
        "/loginform",
        function (data) {
            $("#myModal").html(data);
        }
    ); 
});

触发模式：

var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("openloginpopup");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

Answer 1

您似乎正在使用Bootstrap，因此无需使用香草JS来控制模式，甚至在已经使用jQuery时也无需使用。

根据Bootstrap文档 ，您可以使用

$('#myModal').modal('show');  // show the modal
$('#myModal').modal('hide');  // hide the modal

尝试

$("#openloginpopup").on('click', function(){
  $('#myModal').modal('show');
}

为了从您当前的模态中打开另一个模态，首先隐藏活动模态，然后打开第二个模态，反之亦然。

$("#SECOND_MODAL_BUTTON").on('click', function(){
  $('#FIRST_MODAL').modal('hide');
  $('#SECOND_MODAL').modal('show');
}
$("#FIRST_MODAL_BUTTON").on('click', function(){
  $('#SECOND_MODAL').modal('hide');
  $('#FIRST_MODAL').modal('show');
}

Answer 2

我认为这对您有帮助，如果您在模态之间按下“打开”按钮，如果其中之一处于打开状态，则不打开模态1：

的HTML

<div id="openloginpopup">
    <div class="modal-content">
        open
      </div>
</div>
<div id="myModal" class="modal">
    <div class="modal-content modal1">
        <span class="close">&times;</span>
          <div class="popup-form">
           modal1   
          </div>
      </div>
</div>
<div id="myModal2" class="modal">
    <div class="modal-content modal1">
        <span class="close">&times;</span>
          <div class="popup-form">
           modal2   
          </div>
      </div>
</div>

JS

$("#openloginpopup").on('click', function(){
    if(!$('#myModal').is(':visible') && !$('#myModal2').is(':visible')){
         $('#myModal').modal('show'); 
  }else{
        if($('#myModal').is(':visible')){
        $('#myModal2').modal('show'); 
        $('#myModal').modal('hide'); 
      }else{
        $('#myModal2').modal('hide');
        $('#myModal').modal('show');
      }
  }
});

$(".modal").on('click', function(){
         $(this).modal('hide'); 
});

测试链接

https://jsfiddle.net/022bca5x/12/