jQuery UI: Create dialog using ONLY jquery

I have the following code:

<div id="leaving-dialog" title="Confirmation Required">
    <p>You are now leaving the ****** section of ******</p>
</div>

jQuery(document).ready(function ($)
    {
        $("#leaving-dialog").dialog({
            autoOpen: false,
            modal: true,
            width: 480,
            height: 240,
            resizable: false,
            draggable: false,
            zIndex: 9999999999
        });

        $(".leaving-section").click(function (event) {
            event.preventDefault();
            var targetUrl = $(this).attr("href");

            $("#leaving-dialog").dialog({
                buttons: {
                    "No, I want to stay here": function () {
                        $(this).dialog("close");
                    },
                    "Yes, that's okay": function () {
                        //window.location.href = targetUrl;
                        window.open(targetUrl);
                        $(this).dialog("close");
                    }
                }
            });
            $("#leaving-dialog").dialog("open");
        });
    });

What I want to do is move the HTML into the jQuery code so it's created purely client-side 开发者_开发百科in the DOM. Perhaps storing it in a variable?

Thanks

$(function(){

    var dialog = '<div id="leaving-dialog" title="Confirmation Required"><p>You are now leaving the ****** section of ******</p></div>';

    $('body').append(dialog);

    $("#leaving-dialog").dialog({...});

});

Remove

<div id="leaving-dialog" title="Confirmation Required">
    <p>You are now leaving the ****** section of ******</p>
</div>

and add this inside your functions calls

jQuery(document).ready(function ($)
{
 $('body').append('<div id="leaving-dialog" title="Confirmation Required"><p>You are now  leaving the ****** section of ******</p></div>');
 [...]
});

you can append raw html to any document like this :

$('<div id="leaving-dialog" title="Confirmation Required">    <p>You are now leaving the ****** section of ******</p></div>').appendTo('body');

Source : http://api.jquery.com/jQuery/#jQuery2