用 Jquery html 替换两个内容之间的切换

Question

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

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

我搜索了一下，发现元素上的点击事件丢失了，但是还是找不到解决方法

- 我如何在跨度点击事件（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，因此无需使用 vanilla JS 来控制模式，当您已经在使用 jQuery.

时更是如此

根据Bootstrap docs，您可以使用

$('#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

我认为这可以帮助你，如果你按下 "open" 按钮在模式之间切换，如果其中一个打开，如果没有打开 modal1:

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'); 
});

测试link

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

用 Jquery html 替换两个内容之间的切换

Switch between two contents with Jquery html replace

php

jquery

laravel

blade