jQuery UI modal width issue

Hello, all,

I'm attempting to add a pop-up modal that alerts users that they are accessing a US Govt system (site) with a close button.  So far, it's functional as it should be.  The issue is the width of the modal.  I've tried setting the width to many different values, all of which appear to be ignored.  If anyone could point out where I am missing something, please let me know.  Code, below:

#container, #dod-dialog {
	display: none;
	min-width: 1200px;
	width: 1200px;
	overflow-x: visible;
}

<div id="dod-dialog">
	<div id="container">
		<header> <img src="images/warning_popup-xxxxx.jpg" width="68" height="68" alt="USTC Warning Popup" /> <span>United States Transportation Command</span> </header>
			<section>redacted</section>
			<footer>
				<p>redacted:</p>
				<p>redacted</p>
				<p>redacted</p>
				<p>redacted</p>
				<p>redacted
				<p>redacted</p>
				<p>redacted</p>
				<div id="agree">
					<button type="button" id="agreeBtn" title="Continue">Continue</button>
				</div>
			</footer>
		</div>	
		
	</div>

	<script type="text/javascript">
			document.getElementById("container").style.display = "inline-block";
    $(function() {
        $("#dod-dialog").dialog({
            minWidth: 1200,
            closeText: "",
            closeOnEscape: false,
            draggable: false,
            resizable: false
        });
        $("#container button").click(function() {
            $("#dod-dialog").dialog('close');
        });
      });
    </script>

So, I'm attempting to get the modal to be 1200px wide; but the modal containing the divs is sticking to ~300px wide.  Please advise.

V/r,

^ _ ^