Question

我是jquery的新手，我遇到了显示灯箱表单的问题。我想要一个类似于 this 的表单。但是，我不知道如何定制它

以下是我的代码：

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

Answer 1

您应该在此代码之前添加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>

Answer 2

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

在Themes下，您可以选择并自定义所需的外观，然后在页面上包含该CSS。

Answer 3

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

来自 HTML5 Boilerplate ：

<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库之前，还要确保发生这种情况。

Answer 4

试用此代码：

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事件中。这对你有帮助。

感谢。

Answer 5

将您的脚本更改为：

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

jQueryUI对话框窗体无法打开

5 个答案: