[Solved] What has the best cross-browser support, JQuery dialogs or HTML5 modal dialogs? [closed]

Question

Sounds like maybe jQuery UI’s Dialogs are what you’re looking for? All you do is set aside some HTML in a container (such as a Div) and then render the dialog box.
Link: https://jqueryui.com/dialog/

To “create” the dialog, you’ll just need to create a dialog from the container whenever you need it to be visible. Such as:

 <script type="text/javascript">
     $('#myPopup').dialog(); 
 </script>

That page has an example of how to get started. For more detail with what you can do with them (such as adding buttons), check out the full API page:
Link: http://api.jqueryui.com/dialog/

Even better – you can also use custom themes or a variety of premade themes for jQuery UI. Check out Themeroller (http://jqueryui.com/themeroller/) to get yourself started.

Finally, you’ll need to have both jQuery (https://jquery.com) and jQuery UI (https://jqueryui.com/) included in both of your projects for this to work. I’d recommend reading over the basic jQuery/jQuery UI tutorials if you are new to them.

Edit:

Here is an example on jsFiddle as well as an example of what a page would look like.
Fiddle: http://jsfiddle.net/uLGRA/

Code:

<html lang="en">
<head>
    <title>Test</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/humanity/jquery-ui.css">
    <script type="text/javascript">
        // when the document has loaded..
        $(document).ready(function() {
            // turn this ID into a dialog
            $('#popupTest').dialog();
            // also, turn the input type="button" into a jQuery UI Button
            // for consistency
            $('#btnRandom').button();
        });
    </script>
</head>
<body>
<div id="popupTest" title="Stackoverflow Example">
    <p>Hello, world.</p>
    <p>Care for a cup of tea?</p>
    <input type="text" value="" placeholder="sample input form">
    <input id="btnRandom" type="button" value="this button does nothing... yet">
</div>
</body>
</html>

Accepted Answer