Come incorporare i contenuti di altri URL in pop-up / overlay? - javascript, html, css, popup, overlay

Sto cercando di avere un'ancora sulla mia pagina che,quando si fa clic, viene visualizzato un overlay / pop-up (non sono sicuro della terminologia corretta; ciò a cui mi riferisco è quando la pagina in background diventa grigia fino a quando il pop-up / overlay non viene chiuso).

I contenuti dell'overlay non devono essere statici, ma devono essere estratti da un URL denominato. In effetti, quindi, l'overlay funge da finestra nell'altro URL

Con una buona conoscenza dell'HTML ma zero di CSS o Javascript, accolgo con favore qualsiasi suggerimento.

Grazie.

risposte:

Senza alcuna conoscenza della tua configurazione specifica, è difficile comprendere esattamente cosa stai cercando di realizzare, ma ecco cosa farei.

Se non lo hai già fatto, guarda in jQuery. In particolare jQueryUI. jQueryUI ha l'effetto "pop-up" che stai cercando incorporato (chiamato "modale"). L'implementazione di queste librerie è semplice come includere i file JavaScript nel tuo HTML e quindi scrivere solo poche righe di JavaScript (varietà jQuery) per collegare i gestori JS necessari al DOM. Dai un'occhiata al link "Visualizza sorgente" su questa pagina per vedere esattamente come impostare il modale.

Dopo averlo messo in funzione, fai riferimento a $.funzione ajax di jQuery nella pagina API (non riesco a inserire altri collegamenti o ti collego). L'idea generale qui è che invierai la richiesta AJAX all'URL di tua scelta, quindi usando JS (o jQuery) inserisci quel contenuto in quello che hai impostato in precedenza per il modale. Una volta che i dati sono stati inseriti, allora chiama il modale per aprire, che ora avrà il contenuto richiesto tramite AJAX.

Ecco un jsfiddle che ti mostrerà il minimo indispensabile per metterlo in funzione.

$(function() {
$( "#dialog-modal" ).dialog({
height: 140,
modal: true,
autoOpen: false
});

$(document).on("click", ".load-modal", function(event){
event.preventDefault();
$.ajax({
url: "your_url.php",
cache: false,
method: "post",
success: function(data){
$("#dialog-modal").append(data);
}
});
$("#dialog-modal").dialog("open");
});
});

Se quello che vuoi è una finestra di dialogo modale, puoi farlo senza scrivere javascript / CSS creando un modale Bootstrap e quindi dando un link normale solo due attributi aggiuntivi:

data-toggle="modal"
data-target="#yourModal"

Questa soluzione richiede Bootstrap.