Question

我希望每当我单击按钮（对话框）时，带有html的弹出窗口都应该打开（在somediv标记内），弹出窗口正在打开，但我想增加弹出窗口的宽度并移动到屏幕的左侧而不是中间位置，我该怎么做？这是我的代码

<head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script type="text/javascript">
        function openDialog() {
            $("#somediv").dialog({
                modal: true
            });
        }
    </script>
</head>

<style>
    #somediv {
        display: none;
    }
</style>

<body>
    <div id="somediv">

        <div class="row clear">
            <div class="col-md-4 ">
                <div class="border text-center">
                    <p class="black-text">$50</p>
                    <h2 class="black-text light">1 Month</h2>
                    <p>5 Job Postings</p>
                    <p>Resume Search</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="border text-center">
                    <p class="black-text">$140</p>
                    <h2 class="black-text light">3 Month</h2>
                    <p>10 Job Postings</p>
                    <p>Resume Search</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="border text-center">
                    <p class="black-text">$400</p>
                    <h2 class="black-text light">Annual</h2>
                    <p>Unlimited Job Postings</p>
                    <p>Resume Search</p>
                </div>
            </div>
        </div>


        </div>
        <a href="#" onclick="openDialog();">Dialog</a>
</body>

Answer 1

指定打开对话框时应显示的位置。该对话框将处理碰撞，以便尽可能多地显示该对话框。

<file field name>属性默认为窗口，但是您可以指定要定位的另一个元素。您可以参考jQuery UI Position实用程序以获取有关可用属性的更多详细信息。

代码示例：使用指定的of选项初始化对话框：

position

注意：如果需要，您还可以使用CSS样式调整宽度和高度

Answer 2

您需要增加宽度并向左移动模式的css：

#somediv{
    width: 50% (or anything of your choice);
    margin: 0 0 0 -50px;
}

Answer 3

jQuery UI对话框提供用于设置对话框位置的选项。这是可以传递给对话框构造函数的位置对象-

{ my: "center", at: "center", of: window }

您的代码应如下所示-

$("#somediv").dialog({ modal: true, position: { my: "left top", at: "left bottom", of: window }, width: 500 });

请参阅jQuery UI文档here。

Answer 4

打开对话框时，您可以使用jQuery UI Position或设置position属性：

function openDialog() {
    $("#somediv").dialog({
        modal: true,
        position:['left', 20],
    });
}

如何使用CSS属性jQuery弹出窗口

4 个答案: