Ways to adjust overlay background height based on fancybox content height (be it a sizeable overlay or a scrolling page)

Can anyone help me figure out how to adjust the overlay background height (overlayOpacity portion) in fancybox 2 to match the content height with no extra spaces at the top and bottom of the fancybox?

Here is the code I'm currently using:

jQuery.fancybox({                           
   'scrolling': 'no',
   'hideOnContentClick': true,
   'autoSize'    : true,
   'fitToView'  : false,
   'height' : '100%',
   'hideOnOverlayClick' : true,
   'content' : jQuery('.EngpopupContent'),
   'overlayShow' : true,
   'overlayOpacity' : 0.9,
   'overlayColor' : '#000',
   'transitionIn' : 'elastic',
   'transitionOut' : 'elastic',
   'changeFade' : 'fast',
   'easingIn' : 'swing',
   'easingOut' : 'swing',
   'showCloseButton' : true,
   //'showNavArrows' : true,
   'enableEscapeButton' : true,
   'onStart': function(){
       jQuery("#fancybox-overlay").css({"position":"fixed"});
   }
});

You can check out a reference link that demonstrates what I'm trying to achieve. Please click on the "Please Select Product options" button.

If anyone could offer some assistance, that would be greatly appreciated!

jqueryhtmlcssfancyboxfancybox-2

Answer №1

If my understanding is correct, you are in need of removing the margin and padding from the content being rendered. To achieve this, simply add two additional options to your configuration:

jQuery.fancybox({ 
//other options
'padding': 0,
'margin' : 0,
//other options

For more detailed information, please visit .

Update:

Upon further consideration, it appears that if you are utilizing the default layout with a close button, adding the following CSS to your file may be beneficial:

#fancybox-outer { background: transparent;}
#fancybox-close {top: 25px !important;}
#fancybox-wrap {top: -45px !important;}

This adjustment will eliminate the white background at the top and reposition the wrapper closer to the top (adjust padding and margin to 0 to hide the white side border).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

function name cannot be invoked correctly in JavaScript

I am facing an issue with calling my javascript function correctly when I click on it (show_more_in_month_0/1/2). Below is my current code: $i = 0; foreach ($data as $row){ echo '<td><span class="glyphicon-plus show_more_in_mont_'. ...

javascriptphpjquery

I currently have a CSS menu styled with the code below. Can you recommend the most effective method for centering the entire menu in the middle of the page

I am currently using CSS for a menu on my website. What is the best way to center the entire menu on the page? How can I adjust the menu items to appear in the center instead of on the left side? ul#css3menu1{ margin:0;list-style:none;padding:0;backgro ...

htmlcss

Constructing a list without a specific order using data from various MySQL databases

I am currently in the process of constructing a menu that will display categories, subcategories, and tertiary categories sourced from three distinct tables within my database. Here is how the data is structured: TABLE A ------------------------ | ID | na ...

phphtmlmysqlwebhtml-lists

Refreshing search results in Asp.net MVC3 without having to reload the entire page

I am currently working on a website using asp.net MVC3. In one of the views, I display query results managed in the controller using a foreach loop. Now, my goal is to automatically refresh the output of the query periodically without reloading the entire ...

c#javascriptjqueryajaxasp.net-mvc-3

Several A-frames with a variety of animations

Is there a way to apply multiple animations to one object in A-frame? My goal is to make a gltf model move 5 spaces backwards, and then five spaces to the left once the initial animation is finished. How can I accomplish this task? ...

htmlaframe

Creating a Vertical Navbar Dropdown in Bootstrap 3.0 Without Appending to the Last List Item Only

Currently, I'm in the process of creating a panel layout that features an elegant vertical navbar. Although everything seems to be aligned correctly and I've managed to implement a dropdown menu in a vertical layout, it keeps appending to the las ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is it possible to execute this animation with a single click for repetitive playback?

CODEPEN const btt = document.querySelector('.btt'); btt.addEventListener('click', function(){ this.classList.toggle('anime'); }); Is there a way to achieve the desired effect with just one click? ...

javascripthtmljquerycsscss-animations

When two unique Ids are merged to modify the same div button in distinct ways

Hey there, I'm having a little issue with getting the password_photo_galleries to appear in the right place on my website. The only solution I've found is to add an extra button to the navbar to access that information. Ideally, I want the MyGall ...

htmlcss

Expand the Jquery Jqgrid dynamically to accommodate 20 rows and then display a scrollbar for viewing more than 20 rows

Can a dynamic grid be constructed with the following parameters? rowNum: 20, height: "100%" Where the grid initially accommodates 10 items and automatically expands by one row whenever a new item is added. This expansion continues until it reaches 20 row ...

jqueryjqgrid

The HTML refresh is dynamically controlled by PHP variables

As a newcomer to php/html, I have a question about updating a page's html based on php variables in the forum. Can a page dynamically update its content using php variables? In my scenario, I have: <form action = "" method = "post"> <label&g ...

phphtmlmysql

Ways to modify a link tag based on a specific browser width

Looking for a solution to optimize the drop-down sign in box code that gets appended to a hamburger menu when the mobile width media query is called. Can we refactor this to switch the drop-down sign in box to just an anchor tag (<a href="signin">< ...

javascriptjqueryhtmlcsshyperlink

What is the process for making Bootstrap tables editable?

In my current project, I am utilizing Bootstrap version 5. During the development process, I encountered a requirement to make my bootstrap table editable, allowing users to modify cell values as needed. However, I discovered that the x-editable feature, ...

htmlbootstrap-5bootstrap-tablex-editable

What is causing the text below the SVG path to appear thicker?

I am encountering an interesting issue with my SVG green marker. The text inside appears bolder than the same text with the same attributes when it is standalone. https://i.sstatic.net/NYmXX.png Upon further inspection, I noticed that the text within the ...

htmlcsssvg

How come I am experiencing difficulty modifying the background color of ion-header using a CSS class selector within my Ionic Vue component?

Recently, I began my journey with ionic vue and started incorporating CSS with the components. I added styles in the same file like this: <style scoped> .abc { background-color: blue; } </style> I attempted to apply these style ...

cssvue.jsionic-frameworkionic-vue

Can someone explain the significance of this in an HTML form?

Can anyone explain the following code snippet found in a web form? I found this button code on a webpage, but I'm having trouble understanding it. Could someone provide some clarity? <input type="submit" name="ctl00$ContentPlaceHolder1$Button8" v ...

javascriptasp.nethtmlpostback

Content within the HTML5 navigation tag

There appears to be some inconsistency in the examples provided for the <nav> tag in html5. Many of the examples I've come across demonstrate its usage like this: <nav> <ul> <li><a href='#'>Link</a> ...

html

Tips for creating a scrollable smiley input field

I have a chat system where I am incorporating smileys from a predefined list. QUERY I am looking to create a scrolling feature for the smileys similar to how it is implemented on this particular website. The twist I want to add is to have this functiona ...

javascriptjqueryhtml

CSS for Centering Text and ImageAchieving the perfect alignment

I have a footer positioned at the bottom of my webpage containing some text along with a few PNG images. I am attempting to center everything within the footer. I tried using margin: 0 auto, but it didn't work due to the footer not being a block elem ...

htmlcsscentering

Every time I click on a section of an HTML webpage, JQuery retrieves the ID of that specific tag

How can I retrieve the id of an Html tag that has been clicked by a user on a web page using Jquery? I have attempted to do this, but it seems to only work for specific tags that are passed in the function. $(document).ready(function(){ $("p").click ...

jqueryhtml

A more concise method for verifying if the values of several inputs are empty using jQuery

let title = $('#plustitle').val().trim(); // input type text let tags = $('#plustags').val().trim(); // input type text let story = $('#plustory').val().trim(); // textarea I want to check if any of the variables above are e ...

javascriptjqueryhtmlhtml-input