marker.js 2 Demos: Popup mode

Open marker.js in a popup

In most instances, annotating the image inline works best. But sometimes you want to open the image in a dedicated popup editor. marker.js 2 has this scenario covered.

Set settings.displayMode = 'popup' and the editor will open in a popup.

Click on the image to launch the demo and look at the code below.


Setting displayMode = 'popup' is all you need to change the behavior of marker.js 2:

const markerArea = new markerjs2.MarkerArea(target); // open the editor in a popup markerArea.settings.displayMode = 'popup'; markerArea.addEventListener("render", (event) => (target.src = event.dataUrl));;

And here's a complete HTML file to recreate this demo.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>All defaults demo</title> <script src=""></script> <script> function showMarkerArea(target) { const markerArea = new markerjs2.MarkerArea(target); markerArea.settings.displayMode = 'popup'; markerArea.addEventListener("render", (event) => (target.src = event.dataUrl));; } </script> </head> <body> <img src="img/sample-1.jpg" style="max-width: 600px;" onclick="showMarkerArea(this);" /> </body> </html>

Check out a simple self-contained page for this demo.