时间戳

首页 > 解决方案 > 如何使用 css 属性 jquery 弹出窗口

javascript - 如何使用 css 属性 jquery 弹出窗口

问题描述

我希望每当我单击按钮（对话框）时，应该打开带有 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>

标签： javascriptphpjquery

解决方案

指定对话框打开时应显示的位置。该对话框将处理冲突，以使尽可能多的对话框可见。

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

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

function openDialog() {
    $("#somediv").dialog({
        modal: true,
        width: 500, // or you can have it in %
        height: 400, // or you can have it in %
        position: { my: "left top", at: "left bottom", of: window }
    });
}

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

推荐阅读