example - ¿Cómo se abre una URL en un cuadro de diálogo JQUERY UI?
jquery popup window (4)
No necesita un iframe como se ha sugerido, pero debe leer la documentación en los cuadros de diálogo aquí .
En su lugar, debe cargar el contenido en la propiedad .open -
$( "#openwindow" ).dialog({
open: function(event, ui) {
$(''#divInDialog'').load(''test.html'', function() {
alert(''Load was performed.'');
});
}
});
Además, parece que utilizas .each con una id : se supone que la id es única dentro de la página. usar class lugar.
He estado buscando una solución simple por bastante tiempo. Quiero que se muestre una página (por ejemplo, http://www.google.com ) en una ventana de diálogo de la interfaz de usuario de JQuery. El plan es agregar más adelante la URL dinámicamente para que todos los enlaces de mi sitio se muestren en dicha ventana.
Intenté lo siguiente, pero la ventana de diálogo está vacía al hacer clic en el enlace.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$(''#openwindow'').each(function() {
var $link = $(this);
var $dialog = $(''<div></div>'')
.load($link.attr(''href''))
.dialog({
autoOpen: false,
title: $link.attr(''title''),
width: 500,
height: 300
});
$link.click(function() {
$dialog.dialog(''open'');
return false;
});
});
});
</script>
</head>
<body>
<a id="openwindow" href="http://www.google.com">Click me to test.</a>
</body>
</html>
Encontré algunos ejemplos, pero ninguno realmente funcionó. Realmente agradecería algo de ayuda.
Gracias por adelantado.
Puedes intentar esto
$(function(){
$(''a'').on(''click'', function(e){
e.preventDefault();
$(''<div/>'', {''class'':''myDlgClass'', ''id'':''link-''+($(this).index()+1)})
.load($(this).attr(''href'')).appendTo(''body'').dialog();
});
});
El código anterior creará un nuevo dialog de dialog al hacer clic en cualquier enlace en su página y también agregará un nombre de clase myDlgClass y una identificación única para cada diálogo como link-1 , link-2 etc., pero recuerde que solo se cargará el enlace de la página no enlace externo debido a la misma política de origen.
Actualización:
Para usar un enlace de sitio externo puede usar un iframe , aquí hay un ejemplo que usa iframe .
Puedes usar iframe:
$("#iframeId").attr("src", $(this).attr("href"));
$(''#dialogId'').dialog(''open'');
<div id="divId" >
<IFRAME id="iframeId" SRC="" width="" height = "" >
</div>
Esto podría ayudar ... Aquí lo que estoy haciendo es colocarme en un enlace y la url se abre en un cuadro de diálogo. Debería usar la class lugar de la id si se crean dinámicamente varias etiquetas iguales. De lo contrario, funcionará para solo id único
$(''.openwindow'').click(function(){
var $this=$(this);
$.ajax({
url: $this.attr(''href'');//You got the link here
success: function(data) {
//show the dialog here..
//"data" contains the html returned by the url
},
error: function(jqXHR){
//Do something here
}
});
});