CODEWITHSUNDEEP
jqueryhtmlcss
Roberto Flores
Roberto Flores

Reputation: 789

How to center the dialog title, button and how center JQuery dialog box after browser resize?

the issue I am having is that I am able to create the dialog fine with links and center the text inside the dialog. I am not able to do that with the title and with the button. Another issue I am having is for some reason, the button I have created appears on the dialog box but is not functional and I have tried to center my JQuery dialog box after browser resize but I have failed with that as well. I would like to know how I can fix the issue. Any help would be appreciated thank you all in advance. The following is jsfiddle link: 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>

Upvotes: 1

Views: 8601

Answers (1)

Chad W
Chad W

Reputation: 420

You can center the button and titlebar with CSS (assuming you are loading the jquery-ui css - your question doesn't clarify if you are or not - see update below):

.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;
}

As for the button not working, something else must be causing that. If the button isn't even clickable, then maybe you have some other element with a z-index interfering in the DOM.

Edit: updated jsfiddle

Again, this assumes you are loading the jquery-ui CSS. If you aren't, you can try adding just the CSS for the dialogs by adding:

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

Upvotes: 2

Related Questions