Click here to Skip to main content
15,882,464 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:

I have a data entry page, after filling the fields, user clicks a button which should open a map in the center in a frame or panel.

The whole data entry page should be covered with a transparent grey color panel and at the center of it in a rectangle a map div should show a map. So it should be like a modal frame which doesnt allow the user to use data entry fields below but they can see part of those due to transparency (excluding map content on it)

How should I achieve it. How should be the design of my page?

I was thinking..

Have hidden div in the data entry page covering whole page. Div is given transparency css attribute.

Inside div have a iframe (centered with less size)

When user click a button on data entry page, make the div visible and load the iframe with map in the middle.

When user clicks a button in the div, make the div invisible again.

What do you think?



You may wish to check this out as well.
JQuery SimpleModal plugin.
Share this answer
This behavior is called a Modal Dialog and there are numerous resources available[^]
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900