Activate one fancybox on top of another fancybox using Ajax technology

In my setup, I have a Fancybox that displays a dialog along with a button for interaction. What I am trying to achieve is opening another fancybox either on top of the existing one or at a different position on the screen without losing the original fancybox. Both fancyboxes need to be filled using an ajax request. Is this scenario actually possible? Because so far, my attempts resulted in losing the initial fancybox...

Below is the code snippet I have been working with:

$.fancybox.showActivity();
                $.ajax({
                    type        : "POST",
                    cache       : false,
                    url     : "../testservlet?select=1,
                    data        : $(this).serializeArray(),
                    height      : 600,
                    width       : 800,
                    padding     : 30,
                    showCloseButton : true,
                    success     : function(data) {
                        $.fancybox(data);
                    }
                });

$.fancybox.showActivity();
                $.ajax({
                    type        : "POST",
                    cache       : false,
                    url     : "test?select=2,
                    data        : $(this).serializeArray(),
                    padding     : 30,
                    showCloseButton : true,
                    success     : function(data) {
                        $.fancybox(data);
                    }
                }); 

Answer №1

Regrettably, it's not possible to have more than one fancybox displayed simultaneously as per its design.

However, you could work around this limitation by nesting another fancybox inside the existing one (such as when opening an external page via iframe with fancybox) or by opening the inner fancybox on the parent page to create the illusion of having two fancyboxes on the same page. Find out more here

Alternatively, the only lightbox solution I can recall that supports multiple boxes is jQuery Tools Overlay.

Answer №2

Begin by opening the first fancybox within an iframe. It is also possible to open another fancybox inside of that initial fancybox.

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

Extracting information from a URL

How can I check if a specific anchor, #gbar, is present in a URL like ? If the anchor is present, I need to hide certain divs and show others. Since this anchor is not part of the query string, I cannot use request.querystring.get(). Any ideas on how to ...

What is the best way to utilize Python in order to transform a large amount of unicode into characters to create a string-like appearance?

In JavaScript, I've managed to do this: eval(String.fromCharCode(102,117,110,99,116,105,111,110,32,99,104,101,99,107,40,41,123,13,10,09,118,97,114,32,97,32,61,32,39,100,52,103,39,59,13,10,09,105,102,40,100,111,99,117,109,101,110,116,46,103,101,116,69 ...

IE 11 encountering issues with Date.parse returning NaN

Whenever I attempt to parse a date in Internet Explorer 11, it throws NaN at me. However, in Chrome and Firefox, I get the timestamp 1494559800000. Date.parse("5/12/2017 09:00 AM") The condition below is where things go wrong for me in IE 11. Is there an ...

When using Multer for file upload, the req.body returns as an empty object while req.file is undefined

I previously shared a problem I encountered while using multer for file upload in the MERN stack. Despite my attempts, I have not yet been able to resolve it. In my app, I am using both body-parser and multer. Here is the order of code in my index.js file: ...

Why is my codeigniter list not displaying all the records?

public function ajax_disposisi() { $this->load->helper('tanggal'); $this->jadwal->column_search=array('nomor','tanggal'); $this->jadwal->column_order=array(null,'nomor','tanggal&apo ...

Unable to scroll after the webpage redirects

I am currently working on developing a website for uploading images with a comment feature. The comments section is displayed below the image in the 'imagedisplay.php' file. If a user is not logged in, they are redirected to the sign-up page and ...

Using AJAX to dynamically load content from a Wordpress website

Currently, I have been experimenting with an AJAX tutorial in an attempt to dynamically load my WordPress post content onto the homepage of my website without triggering a full page reload. However, for some reason, when clicking on the links, instead of ...

Tips on employing Ace_Scroll following the completion of an AJAX request

Currently utilizing the Ace Admin Template. Adding content to a div with ID #Mydiv and implementing ace-scroll for the same div (#Mydiv). However, when new content is appended to the div, ace-scroll fails to function properly and does not adjust to the ne ...

Setting a default currency value (either in dollars or euros) in an input field

Is there a way to automatically insert a currency symbol (€, $) in a text field by default when entering a number? Are there any default values for this feature? Thank you Here is an example ...

JavaScript allows you to create matrices from squares

Hey everyone, I'm facing an issue with creating matrices in HTML. I need to display a 5x5 matrix where each index is represented by a square. I tried using a span template for the box and then wrote a script to populate the matrices, but it's no ...

Utilizing jQuery in Wordpress to Toggle Content Visibility

Currently, my website pulls the 12 most recent posts from a specific category and displays them as links with the post thumbnail image as the link image. To see an example in action, visit What I am aiming to achieve is to enhance the functionality of my ...

Executing an ajax call using an Action in the MVC5 framework

I have encountered a situation where I am having difficulty fixing an issue with my DevExpress MVC components, specifically the treeview. Even though this is a common problem with numerous solutions available online, none of them seem to work in my specifi ...

"Retrieving Data Using jQuery's .ajax Method in Visual Basic

<WebMethod()> Public Shared Function gtet() As String ... Dim GET = uClass.GetSets(dbuser, dbparam1) ... End Function and $(document).ready(function () { data = { }; var jsondata = $.toJSON(data); $.ajax({ type: "GET ...

The first time I tried using React-app, I encountered an error that read "[email protected] postinstall"

I've been struggling to set up create-react-app, encountering the same issue repeatedly. I tried uninstalling and reinstalling node.js, but only the package.json and my-app folder were created. No src or other required folders were generated. Termina ...

Unlock the Power of jQuery Plugins: Implementing Global Settings Modifications

I have developed a jQuery plugin ( https://github.com/OscarGodson/jKey ) and some users are requesting localization support. My initial idea was to add an additional parameter in the plugin for localization, such as: $(window).jkey('?',callback, ...

How to obtain the full path of a file downloaded using a Chrome extension

Currently in the process of creating a chrome extension that has the functionality to download specific files from various webpages. For this purpose, I have designed a popup.html where users can input the desired name for the file to be downloaded. Additi ...

Ways to emphasize a distinct cell within a UI Grid by utilizing the cellClass feature

I am struggling with a requirement where I need to highlight a specific cell in a grid using its row and column numbers. However, in the current setup, when I scroll through the grid, other cells are also getting highlighted. It seems like I am not graspin ...

Fixing the NodeJS error "TypeError: Crud.Select_products is not a function" is crucial for the proper functioning of your application

I am attempting to access a class that has been exported from the Crud.js file, but I am encountering an error. My objective is to run a sql query. Error: TypeError: Crud.Select_products is not a function at C:\xampp\htdocs\react\c ...

How can Vue add a class to an element without using v-model:class?

I am faced with the challenge of connecting two elements that are located in different areas of the DOM. The goal is to create a hover effect on one element when the other is interacted with. The first element is within a component and is rendered using t ...

Error: Recaptcha does not have a constructor method

Out of nowhere, my application suddenly started throwing a TypeError: Recaptcha is not a constructor. recaptchaConfig() { this.recaptcha = new Recaptcha( config.service.recaptcha.client_key, config.service.recaptcha.sec ...