Dialog box not showing up properly

Question

I have a very simple dialog box coded in JQuery, but it isn't showing up properly. The box appears when 'Open Dialog' is clicked, but the layout is all messed up and the overlay doesn't cover the entire page as it should. Can someone tell me what the problem here is?

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>


         <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
         <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

         <script>       
$(document).ready(function () { 
    function popup() {
    var myPos = {
        my: "center top",
        at: "center top+210",
        of: window
    };

    //Set up the dialog box
    $(".popup").dialog({
        autoOpen: false,
        modal: true,
        position: myPos,
        resizable: false,
        draggable: false
    });
    }

    $('#d1').click(function () {
    $('.popup').dialog("open");
});

    popup();
    });
    </script>

    <style type="text/css">

.click {
    width: 100%;
    position: absolute;
    padding: 0 25px 0 25px;
    color: darkblue;
    cursor: pointer;
    margin-top: 210px;
}

    .ui-widget-overlay {
    background: #000;
    opacity: .8;
    -moz-opacity: 0.7;
    filter: alpha(opacity=70);
}

    .popup {
    font-size: 18px;
    margin-left: 50px;
    top: 50%;
    font-weight: bold;
    background-color: #fff;
    }



    .ui-dialog-titlebar {
    background: lightblue;
    color: black;
    border: 2px solid #D9D6D4;
    }


    </style>

    </head>

    <body>
    <div class="popup" id="box" title="Title">
    <br>Some random content</br>
    <br>More random content</br>
    <p> Blah blah </p>
    </div>
    <div class="click" id="d1">Open dialog</div>
    </body>
    </html>

Answer 1

It's a CSS issue. Add the following in the head section

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css" />

Dialog box not showing up properly

Question

1 answers

solution1
0 2014-12-09 15:56:58

Dialog box not showing up properly

Question

1 answers

solution1 0 2014-12-09 15:56:58

solution1
0 2014-12-09 15:56:58