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
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;
}
Tags: exception, jqueryjquery
