How can I show the popup on bottom middle of the page when clicking MapboxGL marker?

Question

I want to show a popup on the bottom middle of the page when clicking a marker.

I have used the following code

 new mapboxgl.Popup({ anchor: 'top' })

This shows popup on the bottom of the marker. But I want to show the popup at the bottom middle of the page

Answer 1

Popups are more for attaching to the map at some lat/lng, if you want to trigger something to show/hide based on a click, I would create a separate div then show/hide it appropriately and set the text of it as needed.

map.on('click', 'mylayer', function (e) { 
  // show or hide your div
  // feature that was clicked would be e.features[0]
} );

For the "show or hide your div" part, you could reference: How can I hide/show a div when a button is clicked?