leaflet with OpenStreetMap tile layer map issue

Question

I am using leaflet with OpenStreetMap tile layer, it displayed map on page properly, but if I display map in jQuery UI pop up, map not displayed properly. Map tile not properly aligned. But when I start debugging with console open by F12, map get properly rendered. I don't know how it get.

Image: https://drive.google.com/file/d/1THxx6mgSVg_9ckpyPiBmz8Fxi5nX2l3P/view?usp=sharing

https://drive.google.com/file/d/1JqQte7O8ZiqcoJ92otEMMVFSPN0n71jU/view?usp=sharing

My code:

document.getElementById('mapdiv').innerHTML = "<button type='button' onclick='recenterMap("+lat+","+lng+")'>Recenter Map</button>";
    document.getElementById('mapdiv').innerHTML = "<div id='map1' style='width: 100%; height: 100%;'></div>";
    var mymap = "";
    var mymap = L.map('map1').setView([lat, lng], 13);

    var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(mymap);

    var marker = L.marker([lat, lng]).addTo(mymap);
    marker.bindPopup(loc_address).openPopup();

$('#show_map').dialog({   
    width: 450,
    height: 450,
    modal: true,
    resizable: true,
    dialogClass: 'form-style-lg',
    close : function() {

        }
    }).prev(".ui-dialog-titlebar").css("color","#337ab7");

}