<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Dialog functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <!-- CSS --> <style> .ui-widget-header,.ui-state-default, ui-button { background:#b9cd6d; border: 1px solid #b9cd6d; color: #FFFFFF; font-weight: bold; } .invalid { color: red; } textarea { display: inline-block; width: 100%; margin-bottom: 10px; } </style> <!-- Javascript --> <script type = "text/javascript"> $(function() { $( "#dialog-6" ).dialog({ autoOpen: false, buttons: { OK: function() { $( this ).dialog( "close" ); } }, beforeClose: function( event, ui ) { if ( !$( "#terms" ).prop( "checked" ) ) { event.preventDefault(); $( "[for = terms]" ).addClass( "invalid" ); } }, width: 600 }); $( "#opener-5" ).click(function() { $( "#dialog-6" ).dialog( "open" ); }); }); </script> </head> <body> <div id = "dialog-6"> <p>You must accept these terms before continuing.</p> <textarea>This Agreement and the Request constitute the entire agreement of the parties with respect to the subject matter of the Request. This Agreement shall be governed by and construed in accordance with the laws of the State, without giving effect to principles of conflicts of law.</textarea> <div> <label for = "terms">I accept the terms</label> <input type = "checkbox" id = "terms"> </div> </div> <button id = "opener-5">Open Dialog</button> </body> </html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more