javascript - 如何从复选框标签中的 anchor 显示模态

Question

我有一个带有表单的网页。我使用 Bootstrap 和 Jquery。在这种形式中，我有一个复选框(检查是否同意条款和条件)。在复选框的标签中，我有类似“我想同意条款”的内容。当有人点击“条款”这个词时，我想要一个模式来显示所有条款和条件。

我试图将打开模式的 JavaScript 代码放在 onclick 属性中，但它仅适用于桌面浏览器。所有的移动浏览器什么都不做。有趣的是，如果我将 anchor 元素放在输入元素之前，它就会起作用。但是如果我把它放在输入元素之后，它就不再起作用了。

<div class="form-group">
    <a class="terms" href="javascript:void(0)" onclick="$('#modalTerms').modal('show');">This works</a>

    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="checkTerms" name="checkTerms">
        <label class="custom-control-label" for="checkTerms">I agree with <a class="terms" href="javascript:void(0)" onclick="$('#modalTerms').modal('show');>terms and conditions</a></label>
    </div>
</div>

Answer 1

尝试使用 Bootstrap data-toggle 和 data-target 属性

<!-- Trigger the modal with a button -->
  <a type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</a>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>