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

i've been asked simple solution add links on blog pop-up warning before going link. if agree go on link. first solution works fine (and got here):

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

however, i've been asked have checkbox in pop-up says "i understand" , button continue. if isn't checked or if click outside box (or x close button if there one), goes page on. if checked , click continue goes url on link (as above).

along this, need set browser cookie if dialog checked , continue hit. i've set cookie's in browser js before, not attached to event this, i'm not sure how either.

i've done many searches here , on net in general , can't seem find examples this. have found there's no way standard confirm dialog , need use jquery , that's fine, still can't find example.

any appreciated.

i haven't tested code (i free typed here).

in html:

<div id="agreemodal">   <input id="agree" type="checkbox" />   <button id="btncancel">cancel</button>   <button id="btncontinue">continue</button> </div> 

javascript (in file or in <script> tag) :

document.addeventlistener('domcontentloaded', function() {    var agreeurl = '';    // links on page   var links = document.queryselectorall('a');   links.addeventlistener('click', function( event ){     event.preventdefault(); //stop following link     agreeurl = this.getattribute('href');  // 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 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='';   });  }); 

same code in jquery:

(function( $ ){  $(function(){    var agreeurl='';    $('a').on('click', function( event ){     event.preventdefault(); //stop following link     agreeurl = $(this).attr('href');  // url     $('#agreemodal').show();  //show modal   });    $('#btncontinue').on('click', function( event ) {     event.preventdefault();     if ($('#agree').prop('checked')) { //if checkbox checked goto url       location.href= agreeurl;     }   });    $('#btncancel').on('click', function( event ) {     event.preventdefault();     //hide modal     $('#agreemodal').hide();   });   }); })( jquery); 

hope helps!