javascript - Putting content of popup into modal using OpenLayers?

I'm trying to put the content of a OpenLayers 5 popup into a Boostrap's modal but I cannot make it.

Here the code with popup; it work fine:

.
.
.


  
  


.

.
.

Below the modal that I will use:

  

    



      

        
Dati da area clickFeature.getProperties().c_2001
        
      
      

        





















          
            
              
Residenti stimati
            
          
          
            
              
1991
              
clickFeature.getProperties().c_1991
            
            
              
2001
              
clickFeature.getProperties().c_2001
            
            
              
2011
              
clickFeature.getProperties().c_2011
            
          
        
      
      


        Rielaborazione di dati da censimento ISTAT
      

    
  

How I can do it? I've few skills with javascript and I'm using Bootstrap 4.3.1

Answer

Bootstrap elements (popups, dialogs) have their own logic (methods) of showing/hiding. Initially they are hidden, they are then showed by JQuery $(element).modal('show') method, so you have to treat them differently as usual html overlays.

Instead of setting html content, you just call $(element).modal('show') method:

...

var overlay = new ol.Overlay({
  element:  document.getElementById('myModal'),
  autoPan: true,
  autoPanAnimation: {
    duration: 250

  }
});

map.on('singleclick', function(evt) {
  clickFeature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
    return feature;
  });
  if (clickFeature) {
    var element = overlay.getElement();
    overlay.setPosition(evt.coordinate);

    $(element).modal('show');
  }
});

If you want to dynamically change content of modal window, you can do it by giving id to desired elements and then changing innerHTML property of the element.