javascript - 弹出窗体 - 定位和样式

Question

所以我有这个弹出表单，它工作正常，但它不允许我控制它弹出的位置，即使我尝试应用 CSS 它也不起作用。此外，该表单应该在 <aside> 中。形式，但它没有显示在那里。

我有以下 html 代码

    <aside>
        <form method="post" class="basic-frm" id="newFolder">
            <label>
                <h1>New Folder</h1>
            </label>
            <label>
                <span>Title:</span>
                <input id="title" type="text" name="title"/>
            </label>
            <label>
                <span>Description</span>
                <input id="description" type="text" name="description"/>
            </label>
            <input id="submit" type="submit" name="submit" value="Submit" class="button"/>
            <input id="cancel" type="button" name="cancle" value="Cancel" class="button"/>

        </form>

        <h1>Welcome</h1>
        <img src="images/newFolder.svg" onmouseover="this.src='images/newFolderHover.svg'" onmouseout="this.src='images/newFolder.svg'" id="clicky">
        <p>New folder</p>
    </aside>

Jquery代码如下:

$(document).ready(function(){
    $('#newFolder').dialog({
        autoOpen: false,
        width: 600
    });
    $('#clicky').button().click(function() {
        $('#newFolder').dialog("open")
    });
    $('#cancel').button().click(function() {
        $('#newFolder').dialog("close")
    });
});

像颜色和东西这样的 CSS 可以工作，但宽度不行，但边距不行，我也希望它留在 <aside> 中。事实并非如此。

Answer 1

您还应该指定位置:

$( ".selector" ).dialog({ 
    position: { my: "left top", at: "left bottom", of: "aside" } 
});

这将使您可以相对于另一个元素('aside' 选择器)定位对话框。

检查 jQuery UI Dialog API .