Modal Annotations

Modal Annotations

Released 7 years ago , Last update 7 years ago

Javascript Widget that adds transparent modal annotations over images within a web page.

Modal Annotations is a javascript/css widget that allows you to add transparent modal annotations over images within a web page. This widget is highly customizable, allowing users to easily change the color, size, and behavior of the annotations.

Features Include:

  1. Modal Annotation div that can be applied to images on a page

  2. Ability to change Annotation Color by adding a CSS class. Colors include gray, red, green, yellow, and blue.

  3. Ability to change Annotation size by adding a CSS class. Sizes include (Big, Medium, and Small)

  4. Ability to modify Annotation Opacity, Animation Speeds, and Animation Ratios via Javascript flags.

  5. Modal Annotations has it's own css file which makes it highly extensible in terms of look and feel

  • 5 0
  • 4 0
  • 3 1
  • 2 0
  • 1 0
1 Reviews Read Reviews


14 day 14-day money-back guarantee


Personal License

  • Perpetual license

  • 1 site, unlimited servers

  • No distribution (hosted use only)

  • Commercial use


It's easy get Modal Annotations up and running on your website.

1) Copy modal_annotations.js into your website's javascript directory

2) Copy modalannotationsstyle.css into your website's css directory

3) Copy all image assets from the supplied images folder into your website's images directory

4) Now add the following into your HTML file's header

//****foo.html header****

<!-- The CSS -->
<link rel="stylesheet" href="css/modal_annotations_style.css" type="text/css" media="screen"/>

<!-- The JavaScript -->
    <script type="text/javascript" src=""></script>
<script type="text/javascript" src="js/modal_annotations.js"></script>

//****foo.html header****       

And that's it, your site is now set up with Modal Annotations. Now lets say that you have 2 images of the same dimensions called image.jpg and image_annotation.jpg. You can apply the annotation using the following notation:

//****foo.html body****

    <div class="modal_annotations">
        <div class="annotation_item">
            <div class="base_image">
                <img src="images/image.jpg" />
            <div class="overlay_image">
                <img src="images/image_annotation.png"/>

//****foo.html body****
2 licenses, starting from From » $6.99 View Licenses

Get A Quote

What do you need?
  • Custom development
  • Integration
  • Customization / Reskinning
  • Consultation
When do you need it?
  • Soon
  • Next week
  • Next month
  • Anytime

Thanks for getting in touch!

Your quote details have been received and we'll get back to you soon.

Or enter your name and Email
  • CT Christoph Toth 3 years ago
    This is exactly what I've been looking for. But, I also need to be able to save the annotations so that when an image is displayed by another user they will see what's been added. Can this support that?