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

您还应指定position：

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

这将让您将对话框相对于另一个元素（＆＃39;旁边的选择器）定位。

检查jQuery UI Dialog API。

Answer 2

我认为在你的CSS中你有一些代码可以定义你的＃34;旁边＆＃34;标签..

在你的css中为你的标签添加一些坐标为valign：top bottom ... align：left，center，... an so on

和你的html代码

<aside>
    <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>

        <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>


    </aside>

我的欢迎部分应该在最重要的位置，不是吗？

弹出窗体 - 定位和样式

2 个答案: