|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>Bootstrap Bootstrap Modal as Confirm</title> <title>Modal</title> <meta name="generator" content="Bootply" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link rel="shortcut icon" href="/bootstrap/img/favicon.ico"> <link rel="apple-touch-icon" href="/bootstrap/img/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="72x72" href="/bootstrap/img/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="/bootstrap/img/apple-touch-icon-114x114.png"> <!-- CSS code from Bootply.com editor --> <style type="text/css"> </style> </head> <!-- HTML code from Bootply.com editor --> <body > <div class="container"> <a href="#" class="confirm-link" data-link="http://aq.gthex.co.uk:10000/thankyou.php/">Link</a><br> </div> <div id="myModal" class="modal hide"> <div class="modal-header"> <a href="#" data-dismiss="modal" aria-hidden="true" class="close">×</a> <h3>Agree</h3> </div> <div class="modal-body"> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, </p><p>Do you want to agree?</p> </div> <div class="modal-footer"> <a href="#" id="btnYes" class="btn agree">Yes</a> <a href="#" data-dismiss="modal" aria-hidden="true" class="btn secondary">No</a> </div> </div> <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type='text/javascript' src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> <!-- JavaScript jQuery code from Bootply.com editor --> <script type='text/javascript'> $(document).ready(function() { $('#myModal').on('show', function() { var link = $(this).data('link'), agreeBtn = $(this).find('.agree'); }) $('.confirm-link').on('click', function(e) { e.preventDefault(); var link = $(this).data('link'); $('#myModal').data('link',link).modal('show'); }); $('#btnYes').click(function() { // handle redirect here var link = $('#myModal').data('link'); location.href = link; $('#myModal').modal('hide'); }); }); </script> </body> </html> |
