jquery - 无法设置 Fancybox 模态样式-6ren

jquery - 无法设置 Fancybox 模态样式

转载作者：行者123 更新时间：2023-12-01 04:33:52

27

4

我在设置模式时遇到问题，我设置为用精美的盒子打开。单击后，模态/div 的内容会显示出来，没有任何问题，但似乎我应用于该模态 div 的所有样式都拒绝显示。

.hidden{
display:none;
}

.red{
background: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>modal</title>
  
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
</head>
  
  
<body>
  <div>
     <a data-fancybox data-src="#open" href="javascript:;">Open modal  box</a>
  </div>
  
  <div class="hidden">
     <div class="red" id="open">
          <h2>Hello</h2>
          <p>You are awesome.</p>
       </div>
   </div>
  
</body>
   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
</html>

这是我的 setup在 Codepen 上

最佳答案

如果您的常用选择器无法应用样式，请尝试更具体地选择元素。

ID 具有更高的具体性，因为它们是唯一的。

类名也很具体，但它们也用在其他样式表中

标签名称不是最具体的，因为它们可以在页面中的任何位置找到

和 * 选择器在 css 中具有最低的特异性

div.red{background: red;} // Selects divs that have 'red' classname

.hidden{
display:none;
}

div.red{
background: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>modal</title>
  
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
</head>
  
  
<body>
  <div>
     <a data-fancybox data-src="#open" href="javascript:;">Open modal  box</a>
  </div>
  
  <div class="hidden">
     <div class="red" id="open">
          <h2>Hello</h2>
          <p>You are awesome.</p>
       </div>
   </div>
  
</body>
   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
</html>

关于jquery - 无法设置 Fancybox 模态样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60246217/

27

4

0

文章推荐： java - 创建与 ESB(Web 逻辑，连接工厂)java 的连接

文章推荐： tsql - 如何在 SQL 中生成随机字符串

文章推荐： javascript - 折叠列表 : Keep open only the active one open

angularjs - 什么是 Angular 态？
我来自 Asp.Net 世界，试图理解 Angular State 的含义。什么是 Angular 状态？它类似于Asp.Net中的ascx组件吗？是子页面吗？它类似于工作流程状态吗？我听到很多人
javascript - 3 态 CSS 拨动开关
我一直在寻找 3 态拨动开关，但运气不佳。基本上我需要一个具有以下状态的开关: |开 |不适用 |关 | slider 默认从中间开始，一旦用户向左或向右滑动，就无法回到N/A(未回答)状态。有人

首页

博学

6Ren·AI

商城

jquery - 无法设置 Fancybox 模态样式