Home » Jquery » jquery – Can't style Fancybox modal-Exceptionshub

jquery – Can't style Fancybox modal-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

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/[email protected]/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/[email protected]/dist/jquery.fancybox.min.js"></script>
</html>

Here is my setup on Codepen

How to&Answer:

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/[email protected]/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/[email protected]/dist/jquery.fancybox.min.js"></script>
</html>

Answer:

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;
}