Modal Window or Page

William_Lee · May 26, 2021, 3:26am

I would love to see some type of modal features like in this image… Where we construct a pop up modal window that would allow for custom input controls.

Thanks!

Dima · May 26, 2021, 8:05am

Hello @William_Lee

I’ve created an internal BKNDLSS-25278
to add this component. When it will be released I let you know.

Regards, Dima

mark-piller · May 26, 2021, 3:40pm

Hi William, it is actually possible. Here’s an example. (click “Track Shipment” in the header).

William_Lee · May 26, 2021, 3:49pm

That looks very cool… any instructions on how to do that? Especially with the faded back page look.

mark-piller · May 27, 2021, 5:11pm

Hi William,

You can get detailed instructions here:

github.com

ksawl/backendless/blob/master/Components/Modal/index_en.md

# Modal Window

_This tutorial shows how to build a modal window step by step_

An example of a component can be viewed **[demo](https://eu.backendlessappcontent.com/8AAA8E74-06F7-48FD-9154-1AA3227BFA24/D8E91033-BD89-40C0-9FD9-126973003E38/files/web/app/index.html?page=Modal)**

## Disclaimer

The names for the classes and elements in this component are used for example. You can do whatever you like.

***

## Structure

Let's start assembling the modal window by creating the component structure on the **User interface** tab.

![select tab user interface](./images/tab_user_interface.png)

The general structure of the component is shown below. For clarity, element **IDs** are named the same as classes.

This file has been truncated. show original

Regards,
Mark

Grace_Young · August 26, 2022, 10:36am

This example no longer works (page shows error {"code":2002,"message":"Unable to identify the application. Make sure application ID and API key are correct","errorData":{}}). Is it possible to still see?

mark-piller · August 26, 2022, 9:41pm

Here’s the updated link (click “Track Shipment” at the top of the page to see an example of a modal popup). This demo app is available in our blueprint apps:
https://maturesleet.backendless.app/api/files/web/app/index.html?page=HomePage