Getting A JQuery Dialog To Automatically Change Size To Fit A Message

Getting A JQuery Dialog To Automatically Change Size To Fit A Message

I am trying to use a jQuery dialog box to replace the standard confirm() as much as is possible.

I'm almost there, but I would like to reuse the code below throughout my web app and for that I need the jQuery dialog box to change its size to fit the message.

When I've tried setting height:auto or width:auto, the dialog disappears, showing only the message ( or maybe it is the dialog box taking over the whole screen ). I tried this in combination with setting maxWidth and maxHeight to no avail.

This happens if I use jQuery-1.7 or jQuery-1.8.2.

If I use jQuery-1.9.1 the dialog does not come up at all

I downloaded a freshly update verusion of my jQuery-ui theme ( "redmond" )

Thanks in advance for any tips in helping me find a way to make the dialog box automatically resize itself to fit the message ( without scrolling)

Thanks

Steve 

  1. <html>
<head>
    <title>Experiment JQ Confirm Dialogs</title>

    <link type   = "text/css" href = "../css/jquery-ui-1.9.1.custom.css" rel = "stylesheet" />
    <script type = "text/javascript" src = "../js/jquery-1.7.js"></script>
    <script type = "text/javascript" src = "../js/jquery-ui-1.9.1.custom.min.js"></script>

    <script>
        var jqConfirmValue = false;
        //--------------------------------------------------------------------
        function jqConfirm(msg, okLabel,cancelLabel,okCallBack,cancelCallBack){
            $("#jqConfirmDialog").text(msg);
            $("#jqConfirmDialog").dialog({
                resizable: false,
                height:280,
                modal: true,
                draggable: false,
                buttons:[

                {
                  text: okLabel,
                  click: function(){$(this).dialog("close");okCallBack();}
                },/* end ok button*/
                {
                  text: cancelLabel,
                  click: function(){$(this).dialog("close");cancelCallBack();}
                }/*end cancel button*/


                ]/*end buttons*/ 
                     
                });// end .dialog()
        }// end funciton jqConfirm()
        //---------------------------------------------------------------------
        function confirmIt(){ alert("true!"); }
        function cancelIt(){ alert("false!"); }
        //--------------------------------------------------------------------
        function test(){


            var msgConfirmZeroAndBlank = "You may not receive all emergency messages " +
                                         "if you don't provide a personal cell phone " +
                                         "number or email address.  Are you sure you " +
                                         "want to opt out?";

            jqConfirm(msgConfirmZeroAndBlank, "Yesh!", "Nay!",confirmIt,cancelIt);
        }


    </script>


 
</head>
<body background = "white">
<h1>Experiment JQuery Confirm Dialog</h1>




 <div id = "jqConfirmDialog" title = "Confirm" style = "text-align:left;font-family:Arial,Helvetica;font-size:11pt;font-weight:bold;" ></div>

 <input type = "button" value = "Click Me!" onclick = "test();"/>


</body>

</html>