对话框显示不正确

Question

I have a very simple dialog box coded in JQuery, but it isn't showing up properly. 我有一个用JQuery编码的非常简单的对话框，但显示不正确。 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. 这是一个CSS问题。 Add the following in the head section 在head添加以下内容

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

对话框显示不正确

问题描述

1 个解决方案

解决方案1
0 2014-12-09 15:56:58

对话框显示不正确

问题描述

1 个解决方案

解决方案1 0 2014-12-09 15:56:58

解决方案1
0 2014-12-09 15:56:58