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

问题描述：

$('#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不出现???我想要的是，在花哨盒内展示一个div。必须有真正的东西 - 真的很愚蠢，我错过了，但只是无法弄清楚自己。谢谢。

答

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

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

...是绑定的fancybox的选择与id="divEditable2"。你实际上需要点击那个选择器才能激发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,

谢谢你......我知道我错过了一些非常愚蠢的东西。你的第一条线显示了正确的道路。 – MrClan 2012-01-27 10:13:02

答

试着做一些像。

将div保留在标记中不要动态生成它。

将文本区域的东西附加到div，然后给你的花哨框打一个电话。

已经尝试过，但没有用。 – MrClan 2012-01-27 06:56:08

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

相关推荐