如何：jQuery/JS 在 link 上带有复选框的对话框，带有单击事件（转到那个 link）

Question

有人要求我提供一个简单的解决方案来添加到博客上的 links，该解决方案会在转到 link 之前弹出警告。只有您同意，您才会继续 link。第一个解决方案工作正常（我在这里得到它）：

<script type="text/javascript">
function confirm_alert(node) {
    return confirm("some message here");
}
</script>
<a href="http://www.google.com" onclick="return confirm_alert(this);">Click Me</a>

但是，现在我被要求在弹出窗口中有一个复选框，上面写着 "I understand" 之类的内容，然后是一个按钮以继续。如果它没有被选中，或者如果他们点击框外（或者 X 关闭按钮，如果有的话），那么它就会返回到他们所在的页面。如果选中它并且他们单击继续，它将转到 link 上的 URL（如上所述）。

除此之外，我需要仅在对话框被选中并继续点击时设置浏览器 cookie。我以前用JS在浏览器中设置过cookie，但没有附加到这样的事件，所以我也不知道该怎么做。

我在这里和网上进行了很多搜索，但似乎找不到任何这样做的例子。我发现无法使用标准确认对话框执行此操作，需要使用 jQuery 没关系，但我仍然找不到示例。

非常感谢任何帮助。

Answer 1

我还没有测试过这段代码（我只是在这里随意输入）。

在HTML中：

<div id="agreeModal">
  <input id="agree" type="checkbox" />
  <button id="btnCancel">Cancel</button>
  <button id="btnContinue">Continue</button>
</div>

JavaScript（在另一个文件或在 <script> 标签中）：

document.addEventListener('DOMContentLoaded', function() {

  var agreeUrl = '';

  // Get the links on the page
  var links = document.querySelectorAll('a');
  links.addEventListener('click', function( event ){
    event.preventDefault(); //stop it from following link
    agreeUrl = this.getAttribute('href');  // get the url
    document.getElementById('agreeModal').style.display='block';  //show Modal
  });

  var btnContinue = document.getElementById('btnContinue');
  btnContinue.addEventListener('click', function( event ) {
    event.preventDefault();
    var cb = document.getElementById('agree');
    if (cb.checked) { //if checkbox is checked goto url
      location.href= agreeUrl;
    }
  });

  var btnCancel = document.getElementById('btnCancel');
  btnCancel.addEventListener('click', function( event ) {
    event.preventDefault();
    //hide Modal
    document.getElementById('agreeModal').style.display='';
  });

});

jQuery中的相同代码：

(function( $ ){
 $(function(){

  var agreeUrl='';

  $('a').on('click', function( event ){
    event.preventDefault(); //stop it from following link
    agreeUrl = $(this).attr('href');  // get the url
    $('#agreeModal').show();  //show Modal
  });

  $('#btnContinue').on('click', function( event ) {
    event.preventDefault();
    if ($('#agree').prop('checked')) { //if checkbox is checked goto url
      location.href= agreeUrl;
    }
  });

  $('#btnCancel').on('click', function( event ) {
    event.preventDefault();
    //hide Modal
    $('#agreeModal').hide();
  });

 });
})( jQuery);

希望对您有所帮助！

如何：jQuery/JS 在 link 上带有复选框的对话框，带有单击事件（转到那个 link）

How to: jQuery/JS Dialog box with checkbox on a link with click event (to go to that link)

html

javascript

cookies

jquery