Fancybox样式不起作用

Question

我在我的网站上使用fancybox来显示cookies消息

这是打字稿代码

 import Cookies from "js-cookie";
import "@fancyapps/fancybox/dist/jquery.fancybox.min.css";
import "@fancyapps/fancybox";

    $(function() {
      if ($("#cookie_message")) {
        if (!Cookies.get("cookie_message")) {
          $("#cookie_message").show();
          $("#cookie_message_readmore").on("click", function() {
            $.fancybox.open($("#cookie_message_popup"), { width: 600 });
            Cookies.set("cookie_message", "true", { expires: 7 });
            $("#cookie_message").hide();
          });
        }
      }
    });

一切都好，它有效，但它没有使用fancybox的fancybox .css。

我像这样导入了它

import＆＃34; @fancyapps / fancybox / dist / jquery.fancybox.min.css＆＃34 ;; import＆＃34; @fancyapps / fancybox＆＃34;;

所以看起来像这样

而不是这个

Answer 1

如果你期待这个

$.fancybox.open($("#cookie_message_popup"), { width: 600 });

会将您的#cookie_message_popup元素渲染为600px宽，然后不会，它不会那样工作。

您必须使用CSS为元素设置宽度。想一想 - 如果用户在宽度小于600px的设备上打开页面会怎么样？使用CSS，您可以自由使用任何规则组合，例如最小宽度/最大宽度，媒体查询等。