Question

我有一个模式，当用户点击两个按钮之一时会打开。单击的按钮应确定在模式出现时哪个选项卡将打开。然后，用户应该能够在两个选项卡之间来回点击，然后在模态外部单击以关闭它。

我的工作几乎应该如此，但我不能完全理解它。单击登录或注册链接将首先将用户带到正确的选项卡，但如果您关闭模式，它将在最后一个打开的选项卡上打开，无论单击哪个链接。每次点击链接时，如何让模态打开到相应的选项卡？

CodePen：https://codepen.io/m-use/pen/eEBxyv

HTML：

<p><a href="#" data-tab-id="tab1" class="form-modal-button">Login</a></p>
<p><a href="#" data-tab-id="tab2" class="form-modal-button">Register</a></p>

<div id="form-modal">
    <div class="modal">
        <input class="modal__tab-radio" type="radio" name="tabs" id="tab1" checked>
        <label class="modal__tab-label" for="tab1">Login</label>

        <input class="modal__tab-radio" type="radio" name="tabs" id="tab2">
        <label class="modal__tab-label" for="tab2">Register</label>

        <div class="modal__panel" id="tab1-content">
            <p>Login form goes here</p>
        </div>

        <div class="modal__panel" id="tab2-content">
            <p>Register form goes here</p>
        </div>
    </div>
</div>

jQuery的：

$(function(){
  var $modalButton = $('.form-modal-button'),
      $formModal = $('#form-modal').hide(),
      $modal = $('.modal');

  $(document).mouseup(function(e) {
      if (!$modal.is(e.target) && $modal.has(e.target).length === 0) {
        $formModal.hide();
        $('html').css('overflow', 'auto');
      }
  });

  $modalButton.click(function(){
    $radio = 'input:radio[id=' + $(this).attr('data-tab-id') + ']';
    $($radio).attr('checked',true);
    $formModal.show();
    $('html').css('overflow', 'hidden');
  });
});

Answer 1

将此代码替换为每次打开单击的模态。

$modalButton.click(function(){
    $radio = 'input:radio[id=' + $(this).attr('data-tab-id') + ']';
    $($radio).prop('checked',true);
    $formModal.show();
    $('html').css('overflow', 'hidden'); 
});

modal中的jQuery选项卡

1 个答案: