Question

我想要的只是：

$('#divEditable2').fancybox();

我当然试过了，但是当它不起作用时，我甚至试过了。仍然没有输出。

这是我的完整代码：

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="fbTest.aspx.cs" Inherits="InlineEditing.fbTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../jquery-1.4.3.min.js" type="text/javascript"></script>
    <script src="jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="~/Scripts/fancybox/fancybox/jquery.fancybox-1.3.4.css"
        media="screen" />
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btn').click(function () {

                alert('loading...');
                var divObject = document.createElement('div');
                divObject.setAttribute('id', 'divEditable2');
                var editorContent = '<textarea rows="5" cols="55">sample text' + '</textarea><input type="button" value="Save Edits" id="btnSaveEdits" style="margin-left: 300px;" onclick="HideTextArea(event);"/><input type="button" value="Cancel Edits" id="btnCancelEdits" style="margin-left: 5px;" onclick="DoCleanUp();"/>';

                $('#divEditable2').fancybox({
                    'modal' : true,
                    'type' : 'inline',
                    'autoDimensions': false,
                    'width': '700',
                    'height': '320',
                    'showCloseButton': false,
                    'hideOnOverlayClick': false,
                    'enableEscapeButton': false,
                    'content': editorContent
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="display: none;">
        <div id="divEditable2">
            This is the test div.</div>
    </div>
    <input type="button" id="btn" value="show" />
    </form>
</body>
</html>

点击按钮，没有错误（萤火虫），但我仍然不明白为什么没有出现fancybox ???我想要的只是在fancybox中显示div。必须有一些真正愚蠢的东西，我错过了，但是我自己也搞不清楚。感谢。

Answer 1

尝试做一些像。

保持标记中的div不会动态生成它。

将文本区域内容附加到div，然后调用您喜欢的框。

Answer 2

在我看来，你误解了fancybox的逻辑。这行做什么

$('#divEditable2').fancybox();

...是使用id="divEditable2"将fancybox绑定到选择器。你实际上需要点击那个选择器来激发fancybox ...当然你不能，首先是因为隐藏而第二个因为不是链接，是DIV

您可以尝试将变量editorContent的值附加到选择器'#divEditable2'，然后将第二个作为href定位，例如：

$('#divEditable2').append('<textarea rows="5" cols="55">sample text' + '</textarea><input type="button" value="Save Edits" id="btnSaveEdits" style="margin-left: 300px;" onclick="HideTextArea(event);"/><input type="button" value="Cancel Edits" id="btnCancelEdits" style="margin-left: 5px;" onclick="DoCleanUp();"/>');

然后替换你的代码行：

$('#divEditable2').fancybox({

由此：

$.fancybox({

并替换此行：

'content': editorContent

由此：

'href': '#divEditable2'

此外，为了清理代码，请不要使用带引号的整数值，因此这些

'width': '700',
'height': '320',

应该是

'width': 700,
'height': 320,

为什么fancybox没有出现在这里？

2 个答案: