Question

我正在创建自己的Github页面，并希望为我的简短生物添加一个精美的盒子。这是我为它编写的代码：

<li>
  <a id="fbox" class="fancybox" href="#short-bio">Short Bio</a>
  <div id="short-bio" style="display:none;">
    <h3>Anmol Panda</h3>
    <p>Lorem Ipsum</p>
  </div>
</li>

当我使用谷歌浏览器在本地打开文件时，该框显示“点击”，但它没有显示在实际的Github页面上。它也没有出现在Firefox中。有人可以指导我出错的地方以及我如何正确使用它吗？

抱歉，我忘了添加javascript代码：

    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
            $(".fancybox").fancybox({
                    'width'        : '100%',
                    'height'       : '80%',
                    'autoScale'    : true,
                    'transitionIn' : 'elastic',
                    'transitionOut': 'elastic',
            });
    });
    </script>

此外，这是网站：https://anmol-007.github.io/ 提前谢谢。

Answer 1

＆＃13;

$(document).ready(function() {
	$(".fancybox").fancybox({
		openEffect	: 'none',
		closeEffect	: 'none'
	});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>
<a id="fbox" class="fancybox" href="#short-bio">Short Bio</a>
  <div id="short-bio" style="display:none;">
    <h3>Anmol Panda</h3>
    <p>Lorem Ipsum</p>
  </div>

＆＃13;

如何在html中使用花式框并使其在所有浏览器中显示？

1 个答案: