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">

如何在浏览器调整大小后居中对话框标题，按钮以及中心JQuery对话框的中心位置？

1 个答案: