2

我是 jquery 新手，在显示灯箱表单时遇到问题。我想要一个与此类似的表格。但是，我不知道如何自定义它

下面是我的代码：

<html>
<head>
    <title>Test Light Box</title>
    <script type="text/javascript" src="jquery-ui-1.8.20.custom.min.js"></script>
    <script type="text/javascript">
        $("#dialog-form").dialog({
            autoOpen: false,
            height: 500,
            width: 450,
            modal: true,
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        });         

        $("#create-uer")
            .button()
            .click(function(){
                $( "#dialog-form" ).dialog( "open" );
            });

    </script>
</head>
<body>
    <div id="dialog-form">
    <form>
    <fieldset>
        <label for="name">Schlagwort</label>
        <input type="text" name="search" id="search" />
    </fieldset>
    </form>
</div>

<button id="create-user">Create new user</button>
</body>

4

5 回答 5

2

您应该在此代码之前添加 jquery.css：

<link rel="stylesheet" href="jquery-ui.css" type="text/css" media="all" />

从此页面下载 jquery

http://docs.jquery.com/Downloading_jQuery#Download_jQuery

并将其添加到您的页面

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.20.custom.min.js"></script>
于 2012-05-07T08:29:31.430 回答
1

如果您希望它看起来像 jQuery UI 表单，您还需要包含它们的样式表。

在主题下，您可以选择和自定义您想要的外观，然后在您的页面中包含该 CSS。

于 2012-05-07T07:38:41.897 回答
1

在使用 jQuery UI 之前，您仍然需要加载 jQuery 库（它基本上只是一个“官方”插件 - 因此它的方法和工作依赖于 jQuery 功能）。包含 jQuery 的最快和推荐的方法是从 CDN（内容分发网络）加载它，并在 CDN 失败时回退到本地版本。

来自HTML5 样板文件：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> //try to load from Google's CDN
<script>window.jQuery || document.write('<script src="myScriptDir/jquery-1.7.1.min.js"><\/script>')</script> //in case the jQuery object does not exist (i.e. not loaded) fall back to a local copy

还要确保在加载 UI 库之前发生这种情况。

于 2012-05-07T07:57:14.593 回答
1

试试这个代码：

function openDialog() {

    $('#dialog').remove();

    $('#content').prepend('<div id="dialog" style="padding: 3px 0px 0px 0px;"><iframe src="URL of HTML page" style="padding:0; margin: 0; display: block; width: 100%; height: 100%;" frameborder="no" scrolling="auto"></iframe></div>');

    $('#dialog').dialog({
        title: 'Title of dialog',

        close: function (event, ui) {
              // Code which you want to run at the time of close dialog box;
        },  
        bgiframe: false,
        width: 1000,
        height: 500,
        resizable: false,
        modal: false
    });
};

在这种情况下，您只需要将上述函数放在特定按钮或链接的 Click 事件中。这将对您有所帮助。

谢谢。

于 2012-05-07T08:20:33.597 回答
1

将您的脚本更改为：

<script type="text/javascript">
$(document).ready(function() {
    $("#dialog-form").dialog({
        autoOpen: false,
        height: 500,
        width: 450,
        modal: true,
        Cancel: function() {
            $( this ).dialog( "close" );
        }
    });         

    $("#create-user")
        .click(function(){
            $( "#dialog-form" ).dialog( "open" );
        });
});
</script>
于 2012-05-07T08:29:36.297 回答