Question

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

<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>

但是，现在我被要求弹出窗口中有一个复选框，上面写着“我理解”，然后是一个按钮继续。如果没有选中它或者它们是否在盒子外面点击（或者如果有的话则是X关闭按钮），那么它只会返回到它们所在的页面。如果选中并单击继续，则会转到链接上的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对话框（转到该链接）

1 个答案: