Can't style Fancybox modal

Question

I'm having problems styling a modal I've set to open with fancy box. The content for the modal/div shows up after clicking with no issues but it seems all the styling I applied to that modal div refuses to show up.

.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>

Here is my setup on Codepen

Your style is correct but Get it first priority for fancybox included style — vadivel a, Feb 16 '20 at 07:40
!important also works but I wouldnt be able to use it for all the styling I needed to apply to the div. See Ritesh Khandekar's answer — SeizeDev, Feb 16 '20 at 07:49

Ritesh Khandekar · Accepted Answer · 2020-02-16T07:50:26.937

If your common selectors can't able to apply styles then try to select elements more specifically.

IDs are Higher specific because they are unique.

Class names are specific too but they are used in other stylesheets also

Tag names are not most specific because they can found anywhere in page

And * selector has lowest specificity in 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>

score 0 · Answer 2 · answered Feb 16 '20 at 07:57

Fancybox adds fancybox-content classname to the content to add some necessary CSS properties and some default styling, for example, white background color, padding.

Therefore you simply override these rules, example:

.fancybox-content.red {
  background: red;
  padding: 10px 20px;
}

Can't style Fancybox modal

2 Answers2