Jmol “pop-up” and “pop-in”: How to delay the appearance of Jmol panel until the user requests it

A- Versatile version:

The user clicks to see the 3D model, and chooses whether it will be opened inline within the page (“pop-in”), or in a common pop-up window, or in separate pop-up windows for each model.

• This layout permits to show one or more molecular models in a page, in a fixed size JSmol panel, using a limited set of predefined renderings. The JSmol object is only loaded upon user's request.
• For each instance (molecule), it automatically inserts in the page an image of the molecule (formula, model snapshot...) and instructions for the user. Upon user's click, a Jmol model will be shown, either in a new window (“pop-up”) or in place of the image (“pop-in”).
• Uses inline frames (<IFRAME>) for the image-caption and for the popped-in object.
• Molecule name is automatically inserted in the caption. A discreet top-left "back button" allows to remove inline Jmol and go back to caption.

Method A, version 2019.11.28.  Compatible with: JSmol 14 or later

See it in action   Template for download (for instructions, see the read-me.txt file included)

B- Simpler version:

The user clicks to see the 3D model, always inline within the page (“pop-in”).

• This layout permits to show one or more molecular models in a page, in a fixed size JSmol panel. The JSmol object is only loaded upon user's request.
• For each instance (molecule), it automatically inserts in the page an image of the molecule (formula, model snapshot...) and instructions for the user. Upon user's click, a Jmol model will be shown in place of the image ("pop-in").
• Uses layers (<DIV>).

Method B, version 2019.11.28.  Compatible with: JSmol 14 or later

See it in action   Template for download (for instructions, see the read-me.txt file included)

Suggestions for improvement are welcome.

For an alternative method, see Bill Reusch's page using innerHTML.

Pages coded by Angel Herráez, University of Alcalá

Offered under Creative Commons Attribution-ShareAlike License.