让一个div的onclick弹出类似的fancybox的jQuery

我需要弹出一个div像jQuery的fancybox与我使用下面的代码，但它不工作的弹性效应...让一个div的onclick弹出类似的fancybox的jQuery

HTML：

<a href="#" id="LoginAnchorLink">ClickME</a> 
<div id="dialog" class="Popup" style="display:none;"> 
    content of the div have to be popup 
</div>

CSS：

.Popup { 
    position: fixed; 
    background-color: #ffffff; 
    width: 100px; 
    height:100px; 
}

的jQuery：

jQuery(document).ready(function() { 
    $("#LoginAnchorLink").click(function() { 
     $("#dialog").fancybox(); 
    }); 
});

我错过了什么或出了什么问题吗？

来源

2012-04-17 krish

#LoginAnchorLink没有在HTML中引用。 – SMacFadyen 2012-04-17 11:31:32

是否有可能通过缩放效果实现div中的弹出效果？ – krish 2012-04-17 12:59:48

重新阅读后，我决定编辑帖子。这应该更清楚。

不要忘记附上fancybox的CSS和JavaScript文件。

你的登录表单

<div style="display: none;"> 
    <div id="logindiv" style="width:400px;height:100px;overflow: hidden;"> 
     You div with login data and input fields 
    </div> 
</div>

登录链接

<a id="loginbutton" href="#logindiv" title="enter your login details here">Login Here</a>

jQuery的

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#loginbutton").fancybox({ 
      'titleShow'  : true, 
      'transitionIn' : 'elastic', 
      'transitionOut' : 'elastic', 
     }); 
    }); 
</script>

来源

2012-04-17 11:50:06 Scriptor

-1

你的HTML应该改变像DIS

<a href="#" id="LoginAnchorLink">ClickME</a> 
<div style="display:none;"> 
<div id="dialog" class="Popup"> 
    content of the div have to be popup 
</div> 
</div>

确保jquery库和fancybox js文件的路径

来源

2012-04-17 12:11:36 Sam

如果他仍然使用与发布相同的jQuery代码，这些html更改没有任何区别。你也应该提出一个可用的jQuery代码。 – JFK 2012-04-17 21:34:01

让一个div的onclick弹出类似的fancybox的jQuery

回答

相关问题