# Open annotation style popup on click of a button outside viewer

**URL:** https://pdfjs.community/t/open-annotation-style-popup-on-click-of-a-button-outside-viewer/608
**Category:** Technical Support
**Created:** [March 14, 2021, 7:57am UTC](https://pdfjs.community/t/open-annotation-style-popup-on-click-of-a-button-outside-viewer/608 "2021-03-14T07:57:01Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![himani.sharma](https://avatars.discourse-cdn.com/v4/letter/h/e47774/32.png) [@himani.sharma](https://pdfjs.community/u/himani.sharma)
#### Post date: [March 14, 2021, 7:57am UTC](https://pdfjs.community/t/open-annotation-style-popup-on-click-of-a-button-outside-viewer/608/1 "2021-03-14T07:57:01Z")

</div>

**PDF.js Express Version**

**Detailed description of issue**  
I need to open the style pallete popup for viewer and on changing the color I can change the color of all the annotations loaded on the pdf. Currently this is not happening.  
**Expected behaviour**  
{Provide a screenshot or description of the expected behaviour}

**Does your issue happen with every document, or just one?**  
{Answer here}

**Link to document**  
{Provide a link to the document in question if possible}

**Code snippet**  
On clicking on the btn I need the popup to be visible -

```javascript
 document.getElementById("style-btn").onclick = async () => {
        instance.annotationPopup.getItems();
        instance.openElements(["AnnotationStylePopup"]);
       
      };

```

---

<div class="post-metadata">

### Author: ![himani.sharma](https://avatars.discourse-cdn.com/v4/letter/h/e47774/32.png) [@himani.sharma](https://pdfjs.community/u/himani.sharma)
#### Post date: [March 16, 2021, 12:46pm UTC](https://pdfjs.community/t/open-annotation-style-popup-on-click-of-a-button-outside-viewer/608/2 "2021-03-16T12:46:55Z")

</div>

Hey @Logan !

Is there any way to open the annotation style popup and modify the style of the annotations that are loaded on the pdf. I tried opening the popup using openElements but that did not work.

Any information on this regard would be really hepful.

Thanks

---

<div class="post-metadata">

### Author: ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)
#### Post date: [March 17, 2021, 2:41pm UTC](https://pdfjs.community/t/open-annotation-style-popup-on-click-of-a-button-outside-viewer/608/3 "2021-03-17T14:41:43Z")

</div>

Hey there,

The annotation style popup need to be associated with an annotation and cannot just be opened freely. If you want something like this, it might be best to use your own color picker (theres a ton of JS libraries that can do this) and using that instead.

Once you have the color you want to change annots too, you can simply loop over them and update their stroke and fill styles:

```javascript
  const { annotManager, Annotations} = instance;

  const annots = annotManager.getAnnotationsList();

  for (const annot of annots) {
    // use your custom color here for the r g b values
    const color = new Annotations.Color(255, 0, 0);
  
    annot.StrokeColor = color;
    annot.FillColor = color;

    annotManager.redrawAnnotation(annot)

  }

```

You might need to have special logic for each kind of annotation if you don’t want to set the Fill for certain annotations. To check the type of annotation you can do something like this:

```javascript
  const { annotManager, Annotations} = instance;

  const annots = annotManager.getAnnotationsList();

  for (const annot of annots) {
    // use your custom color here for the r g b values
    const color = new Annotations.Color(255, 0, 0);

    if (annot instanceof Annotations.RectangleAnnotation) {
      annot.StrokeColor = color;
    } else {
      annot.StrokeColor = color;
      annot.FillColor = color;
    }

    annotManager.redrawAnnotation(annot)
  }

```

Thanks!  
Logan