2

我有一个在页面加载时打开的 Fancybox。一切正常，除了我无法设置弹出框的样式。似乎它不会拿起我的CSS。顺便一提; 我不熟悉 js - 我只是从教程中复制！所以如果答案包括js，请非常特别。谢谢！

在头部：

    <link rel="stylesheet" type="text/css" href="/js/jquery.fancybox/jquery.fancybox.css" media="screen" />
    <link rel="stylesheet" href="/stylesheets/ups-screen.css" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="/js/jquery.fancybox/jquery.fancybox-1.2.1.pack.js"></script>


<body onload="$(a'#popup').trigger('click');">

在关闭 body-tag 之前：

    <script type="text/javascript">
$(document).ready(function() {
    $("#popup").fancybox().trigger('click');

});

要加载的内容：

<a id="popup" href="#melding"></a>
<div style="display: none;">
<div class="fancybox">
<div id="melding"><br />
<br />
<h3>Velkommen til min nye hjemmeside.</h3>
<br />
<p>Testing - Testing. </p>
</div>
</div>
</div>

ups-screen样式表中的css：

.fancybox {
width: 600px;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 20px;
padding-top: 30px;
 }

#melding{ 
text-decoration:none;
}
#popup{
background-color:#444;
}

无论我尝试或做什么，它都会返回相同大小的正方形而没有任何填充。

4

2 回答 2

3

尝试这个： 

$(document).ready(function() {
    $("#popup").fancybox({
        'padding' : 30,
        'width' : 600,
    }).trigger('click');
});

以下是更多示例： http: //fancybox.net/blog

编辑： 如果您在fancybox 中加载了iframe，则上述解决方案有效。在您的情况下，您需要为#melding 设置宽度和填充：

#melding{ 
   text-decoration:none;
   width: 600px;
   padding: 30px 30px 20px 30px;

}
于 2012-10-23T14:36:37.097 回答
0 
...except I'm not able to style the pop-up box. 
It seem like it will not pick up my css.

好吧，你知道了 fancybox 如何处理内容（你想在 fancybox 中显示inline的隐藏内容）：<div>

首先，您id="melding"使用以下 html 来定位容器：

<a id="popup" href="#melding"></a>

当您打开fancybox 时，它会<div id="melding">...</div>从文档中的原始位置移动到fancybox。而是留下一个临时占位符，以便内容可以返回到关闭fancybox时的位置。

...所以这就是您的 ( inline) 内容在打开 fancybox之前的样子：

<div style="display: none;">
 <div class="fancybox">
  <div id="melding"><br />
   <br />
   <h3>Velkommen til min nye hjemmeside.</h3>
   <br />
   <p>Testing - Testing. </p>
  </div>
 </div>
</div>

....这就是你打开fancybox（v2.1.2）后的样子

<div style="display: none;">
 <div class="fancybox">
  <div class="fancybox-placeholder" style="display: none; "></div>
 </div>
</div>

....当然<div id="melding">...</div>是在fancybox里面。

给你一个问题：你能看到这个问题吗？答案：您正在将您的样式应用于选择器.fancybox

.fancybox {
  width: 600px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 20px;
  padding-top: 30px;
}

...但是那个选择器从来没有进入fancybox，所以这就是为什么你不能设置它的样式。

您的选择：

一：设置@bbosternak#melding正确指出的样式

...或者

二：改变你的html结构

<div id="melding" style="display: none;">
 <div class="fancybox">
  <h3>Velkommen til min nye hjemmeside.</h3><br />
  <p>Testing - Testing. </p>
 </div>
</div>

请注意，我将id="melding"移至<div><div class="fancybox">

于 2012-10-24T01:12:53.407 回答