jquery - 在覆盖作品中显示隐藏的 div 但没有样式

Question

首先我是自学的。

我正在使用 fancybox 来显示一个隐藏的 div，它工作正常。我的问题是我无法理解如何为隐藏的 div 调用样式表。

有人能告诉我正确的方法吗？

<script type="text/javascript">
   $(document).ready(function(){
      $(".fancybox").fancybox({padding : 0, openEffect  : 'elastic'});       
   });
</script>

我隐藏的div:

<div id="contact" class="contact item">

Answer 1

您可以使用样式表设置 div 的样式，例如

site.css(或任何样式表，不确定你的叫什么)

.contact { padding: 0px; }

或者，如果您想使用 Javascript 来设置样式，请在应用 fancybox 之前或之后随时进行:

<script type="text/javascript">
   $(document).ready(function(){
      $("#contact").css("padding", "0px");
      $(".fancybox").fancybox({openEffect  : 'elastic'});
   });
</script>

请注意，如果您要显示示例 div 的内容，fancybox 会获取隐藏的 div 的内容并显示它，而不是外部 div 本身，这会破坏您的 css 选择器。在这种情况下，一个更好的例子是:

<style type="text/css">
.contact { border: 1px solid pink; }
</style>

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

<div id="fancyBoxContents"><div class="contact">will be displayed</div></div>