fancybox is slightly off-center

I am currently using fancybox 1.3.4 to display some content in a popup window, but I am facing an issue where the popup is not centered in the browser. Can anyone help me with fixing this problem?

Here is the HTML code snippet:

<a class="clickMe" title="" message="Last Updated: 10/1/2013">Privacy Policy</a>

And here is the JavaScript code:

$("body").on("click", ".clickMe", function(){
    showAlertSized($(this).attr("title"), $(this).attr("message"), $(this).attr("width"), $(this).attr("height"));
});
function showAlertSized(title, msg, width, height) {
    debugger;
    if(width === undefined){
        //width = 965;
        width = '95%';
    }
    if(height === undefined) {
        //height = 700;
        height = '95%';
    }
    var content = '<h1>' + title + '</h1>' +
        '<p class="msg">' + msg + '</p>' +
        '<div class="fancy-btns"><input type="button" value="" onclick="closeAlert()" class="fancy-ok-btn" /></div>';
    $.fancybox({
        'content': content,
        'hideOnOverlayClick': false,
        'overlayOpacity' : 0.7,
        'overlayColor' : '#777',
        'width': width,
        'height': height,
        'autoDimensions': false,
        'autoSize': false
    });
}

Attached below is a screenshot representing the current issue.

Answer №1

When setting your width and height to 95% of the viewport, it leaves you with 5% unaccounted for in terms of space. To address this, consider adding a 'margin' of 2.5% to your fancybox initialization call. This adjustment should create a margin of 2.5% on all four sides of your fancybox, resulting in perfect centering. While I am unable to provide a tested or coded example, in theory, this solution should be effective!

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

When the button is clicked, a modal will pop up

Looking for help in incorporating JavaScript to create a responsive modal that pops up with lyrics when a button is pressed in a table. Any assistance would be greatly appreciated. Note: Only the code for the table has been provided. Let me know if you&ap ...

Having trouble accessing a React component class from a different component class

I just started learning reactjs and javascript. For a simple project, I'm working on creating a login and registration form. The issue I'm facing is that when a user enters their email and password and clicks 'register', instead of movi ...

Retrieving the chosen value when there is a change in the select tag

Building a shop and almost done, but struggling with allowing customers to change product quantities in the cart and update prices dynamically. I've created a select-tag with 10 options for choosing quantities. I'd like users to be able to click ...

There seems to be an issue with loading objects using the binary loader in three.js

I have been working on customizing the code of a three.js example to load a .js file that was originally in .obj format. I am using BinaryLoader.js to load the object, however, the object is not appearing in my modified code. Here is what my code looks lik ...

Having trouble getting card animations to slide down using React Spring

I am currently learning React and attempting to create a slide-down animation for my div element using react-spring. However, I am facing an issue where the slide-down effect is not functioning as expected even though I followed a tutorial for implementati ...

The setInterval function is malfunctioning

If I have the following function: function check(){ alert("Welcome"); } window.onload = check(); setInterval("check();", 5000); However, it is not working properly. Oddly enough, when I refresh the page, it works as intended. How can I resolve this i ...

JavaScript objects do not come with a built-in hasOwnProperty function

Here is the code snippet: console.log(typeof res.locals); console.log(res.locals.hasOwnProperty('a')); Result : object Unhandled rejection TypeError: res.locals.hasOwnProperty is not a function Note 1: The 'res' object is from Express ...

Storing multiple items in an array using LocalForage

I have a challenge where I need to add multiple items to an array without overriding them. My initial approach was like this: localForage.getItem("data", (err, results) => { console.log('results', results) // var dataArray ...

Switch the glyphicon based on the open/closed state of the collapsible element - Bootstrap

Is there a way to update the glyphicon based on whether or not a collapsible element is open? This is the code I currently have: <div class="jumbotron ref" data-toggle="collapse" data-target="#collapse"> <div class="row"> <div class=" ...

Activate the div when hovering over the span

Experiencing an issue with triggering a visible div while hovering over a span. Here is the code structure: <ul class="products"> <li> <a href="somelink"> <img src="some image"> <div class="overlay"> Some Text</div> & ...

Discovering DOM elements positioned between two other well-established DOM elements can be achieved by utilizing a variety of methods

What is the most efficient and elegant way to select all elements between two specified elements using vanilla JavaScript? For instance, how can I target all elements between: <h2> and <hr> .. and the result should be an [ p, p, ul ] ... but & ...

What steps can I take to ensure that a user is unable to like a photo multiple times even after refreshing the browser?

I am currently exploring ways to replicate a similar like system found on Instagram. Specifically, I want to create a system where if a user likes a photo and then attempts to like it again, it will be unliked - and vice versa. This behavior should persist ...

Send the Children prop to the React Memo component

Currently, I am in the stage of enhancing a set of React SFC components by utilizing React.memo. The majority of these components have children and the project incorporates TypeScript. I had a notion that memo components do not support children when I en ...

How to Use JQuery Load to Load Google Maps?

Is it possible to ensure that the initialize() function is executed in the correct sequence of events so that a Google Map v3 API map can be loaded via a JQuery .load() method? The current code structure I've implemented is as follows: $('#mapl ...

Maximizing Input Field Utility in React JS

I have a challenge with retrieving values from the input field and passing it to the useEffect. I specifically want the search to be triggered only after pressing the onSearch function. The issue is that I can only capture the value using the onChange func ...

"Troubleshooting the issue of createMediaElementSource not functioning on iOS Safari's Webkit

Looking to perform live sound analysis on my iPhone using the webkitAudioContext Analyzer. var ctx = new (window.AudioContext || window.webkitAudioContext); var audioGoodmorning = new Audio('assets/sounds/greeting.m4a'); var audioSrc = ctx.creat ...

Fetching dynamic JavaScript generated by PHP

I am creating a lightweight website and I have a piece of javascript code that I want to convert into a module by putting it in a separate file. This way, the code will only be loaded after a specific onClick event occurs. Successfully loading the javascr ...

PHP and AJAX: Dual AJAX responses without synchronization

Hey there, I have an ajax-POST request from the client asking for specific information. My idea is to have a PHP file quickly respond with just a number and then follow up with a more time-consuming task that returns an array. I'm curious if it' ...

Creating a customizable React application with an extra environmental setting

I'm currently working on an app that requires some variations. While the core remains the same, I need to customize certain parts of the app such as color schemes and images. My inquiry is: Is it feasible to construct an app with a specified instance ...

Using scrollIntoView() on a horizontally scrollable div will also cause the page to scroll downwards

Within this container, there are divs of varying heights that contribute to the vertical scrolling behavior of the entire page, as expected. Each individual div spans the width of the screen, resulting in horizontal scrolling capabilities for these inner ...