浏览器调整大小后如何居中对话框标题、按钮以及如何居中 JQuery 对话框？

Question

我遇到的问题是，我可以使用链接很好地创建对话框，并将对话框内的文本居中。我无法用标题和按钮做到这一点。我遇到的另一个问题是由于某种原因，我创建的按钮出现在对话框上但不起作用，我试图在浏览器调整大小后将我的 JQuery 对话框居中，但我也失败了。我想知道如何解决这个问题。任何帮助将不胜感激，谢谢大家。以下为jsfiddle链接：https://jsfiddle.net/robontrix/194Ljr30/

HTML：

       <div id="dialog">            
          <p style="text-align:center"> Your computer use can be monitored by others! Consider using a public computer or a friend's computer. Please view more computer safety tips or escape to Google. Then more computer safety tips linked to a page with details about browser history, cache, search history, etc. and escape to Google linked to Google.</p>
          <p style="text-align:center"> To learn more how to computer safety, click the following link: <br><a href="#">Safety Tips</a></br></p>
          <!--Wording can be better just for the meantime-->
          <p style="text-align:center"> If you are not safe, click the following link: <br><a href="#">Get Me Out of Here!</a></br></p> 
        </div> 

        <!--JQuery -->
        <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>

        <script>
            $('#dialog').attr('title','Safety Warning!').dialog({
             width : 700,
             height: 350,
             modal:true,
             opacity:.7,
             closeOnEscape: true, 
             draggable: false, 
             resizable: false,
             buttons: { "Close": function() {
                $(this).dialog("close");
                }
             }
            });
            $(window).resize(function() {
              $('#dialog').dialog('option','position', 'center');
            });
        </script> 

Answer 1

您可以使用 CSS 将按钮和标题栏居中（假设您正在加载 jquery-ui css - 您的问题并没有说明您是否是 - 请参阅下面的更新）：

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: none;
}

.ui-dialog .ui-dialog-title, .ui-dialog .ui-dialog-buttonpane {
    text-align:center;
    padding-left: 0.4em;
    padding-right: 0.4em;
}

至于按钮不起作用，肯定是其他原因造成的。如果该按钮甚至不可点击，那么可能您有一些其他元素的 z-index 干扰了 DOM。

编辑：updated jsfiddle

再次假设您正在加载 jquery-ui CSS。如果不是，您可以尝试添加对话框的 CSS，方法是添加：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/css/base/jquery.ui.dialog.css">