Doğrudan modali append etmiyoruz çünkü funksiyondan gelen string bir ifade. Önce bunu bir html objesine çevirmemiz gerekiyor. Bunun en pratik yolu ise bir html elementi olusturup içine innerHtml ile eklemek. Farklı yolları da var elbette ama bu daha pratik.
Daha sonra obje haline gelen modali ise htmle ekliyoruz.
var modal, convertToObject, parentDiv;
// modali içine koyacağımızbir parent element seçiyoruz.
parentDiv = document.querySelector("#mySweetModal");
// get modal
modal = getModal();
/**
* String htmli html objeye çevir
*/
convertToObject = document.createElement("div");
convertToObject.innerHTML = modal;
/**
* Obje haline gelen modali html'e ekle
*/
parentDiv.appendChild(convertToObject);
/**
* modali getir
* @return string
*/
function getModal() {
if (modal) return modal; // ikinci seferde ajax isteği atmasın
let xhr = new XMLHttpRequest();
xhr.open("GET", "url-veya-dosya-adresi?retrieveModal", false);
xhr.function () {
return JSON.parse(xhr.responseText);
}
xhr.send();
return xhr.onload();
}
/**PHP KISMI */
if(isset($_GET["retrieveModal"])){
$html = <<
HTML;
echo json_encode($html);
}