如何在点击按钮时显示fancybox（示例）

我有一个web应用程序，并且需求需要显示jquery lightbox作为包含一些信息的确认消息。如何在点击按钮时显示fancybox（示例）

经过一番研究，我发现的fancybox FancyBox Jquery Light box

我也跟着一步一步来，直到我能在一家豪华的盒子，这是由<a href="#popup" class="fancybox">Open</a>

我需要触发或显示触发显示所需的确认消息花式框从代码后面的一个asp：按钮

我搜索了很多，我应用时得到的所有结果都不起作用。

任何人都可以告诉我一个关于从c＃中的asp按钮后面的代码触发fancybox的示例，并将其附加在这里？

这是我的代码示例：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery /1.7/jquery.min.js"></script> 
<link rel="stylesheet" href="/source/jquery.fancybox.css?v=2.1.0" type="text/css" media="screen" /> 
<script type="text/javascript" src="/source/jquery.fancybox.pack.js?v=2.1.0"></script> 

<script type="text/javascript"> 
$(".fancybox").fancybox({ 
    openEffect: 'none', 
    closeEffect: 'none', 
    afterLoad: function() { 
     this.content = this.content.html(); 
    } 
}); 
</script> 


<body> 
<form id="form1" runat="server"> 
    <a href="#test" class="fancybox">Open</a> 

    <div id="test" style="display:none;width:300px;"> 
    <table border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td> 
       <input id="Hello" type="text" /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input id="Button1" type="button" value="Press Here" />    
      </td> 
     </tr> 
    </table> 
    </div> 
</form> 
</body>

这段代码是正常工作，并点击打开链接所有我需要的是展示点击ASP后的fancybox后显示的fancybox：按钮

在此先感谢

来源

2012-09-28 Ahmed Hamdy

我不是专业的ASP开发人员，但是一旦元素被渲染成页面，就可以在'$（document）.ready'函数中引用它作为HTML元素提供的jQuery，然后我们可以调用'$（'。fancybox'）。fancybox（）' – Ohgodwhy

对不起，我试试看，不工作谢谢你的回应 –

请确保您有jQuery的脚本代码，请<头“是这样的：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

而且在头部，引用脚本文件本身，像这样的样式沿（假设你已经复制到therootofyourwebsite的文件/文件的fancybox /源）：

<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.0" type="text/css" media="screen" /> 
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.0"></script>

然后，在底部您<体>（但仍体内），请确保您连线起来的fancybox，像这样：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".fancybox").fancybox(); 
    }); 
</script>

来源

2012-09-28 23:57:20 ScottRFrost

我其实做到了s但不工作 –

我添加了一个示例代码，我做了什么，请参阅代码，您可以从代码 –

从代码隐藏调用JavaScript，你可以做这样的事情在你的按钮单击事件处理程序：

ClientScript.RegisterStartupScript(this.GetType(), "fancyBoxScript", "[JAVASCRIPT TO INVOKE FANCYBOX]", true);

该JavaScript将发送到页面并在回发完成后执行。

编辑：您可以在这里找到关于通过JavaScript调用FancyBox的更多信息。它基本上需要你模拟点击一个隐藏按钮：http://thingsilearned.com/2010/01/27/dynamically-calling-fancybox-from-javascript/

来源

2012-09-29 00:01:00

了解我的问题，我实际上是这样做但不工作 –

我添加了一个示例代码，我做了什么，请参阅代码可以从代码 –

如果我理解正确的话，你希望从像html按钮来启动的fancybox：

<button id="newOpen" type="button">open fancybox from button</button>

....是什么重要的是在这里通过asp或任何其他编程语言呈现的html按钮。另请注意，这button不是形式的一部分（在的fancybox打开）

如果上面是正确的，因为你已经有代码从open链接推出的fancybox，则只需添加这一块的jQuery代码：

$("#newOpen").bind("click", function(){ 
$(".fancybox").trigger("click"); 
});

来源

2012-09-29 18:52:18 JFK

了解我的问题是你理解正确，但与ASP按钮，但我现在尝试不工作.....感谢您的回应 –

如何在点击按钮时显示fancybox（示例）

回答

相关问题