cuadro de diálogo jQuery

Im tratando de hacer un cuadro de diálogo con jquery. En este cuadro de diálogo voy a tener términos y condiciones. El problema es que el cuadro de diálogo solo se muestra por PRIMERA VEZ.cuadro de diálogo jQuery

Este es el código.

JavaScript:

function showTOC() 
{ 
    $("#TOC").dialog({ 
     modal: true, 
     overlay: { 
      opacity: 0.7, 
      background: "black" 
     } 
    }) 
}

HTML (a href):

<a class="TOClink" href="javascript:showTOC();">View Terms & Conditions</a> 

<div id="example" title="Terms & Conditions">1..2..</div>

El problema creo es que cuando se cierra el cuadro de diálogo de la DIV se destruye desde el código html therfore nunca puede aparecer de nuevo en la pantalla.

¿Puedes ayudarnos por favor?

Gracias

Fuente

2008-12-14 David Bonnici

Parece que hay un problema con el código que envió. Su función para mostrar el T & C hace referencia a la identificación div errónea. Usted debe considerar la asignación de la función showTOC al atributo onclick una vez que el documento se ha cargado así:

$(document).ready({ 
    $('a.TOClink').click(function(){ 
     showTOC(); 
    }); 
}); 

function showTOC() { 
    $('#example').dialog({modal:true}); 
}

Un ejemplo más concisa que logra el efecto deseado usando el diálogo jQuery UI es:

<div id="terms" style="display:none;"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </div> 
    <a id="showTerms" href="#">Show Terms &amp; Conditions</a>  
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $('#showTerms').click(function(){ 
       $('#terms').dialog({modal:true}); 
      }); 
     }); 
    </script>

Fuente

2008-12-14 16:58:30 carlsz

Estoy de acuerdo 100% con usted. Creo que hay una forma diferente de mostrar TOC en la misma página. El problema es que todos los TOCs se muestran porque están en una declaración DIV. ¿Hay alguna manera de mostrar el DIV solo cuando alguien hace clic en el botón de enlace? –

Vea el segundo ejemplo que acabo de agregar. – carlsz

Lo probé (copié y pegué el código pero el "LOREM ..." no se muestra en el cuadro de diálogo y 2. Una vez que se hace clic en el enlace, aparece el diálogo, luego, cuando hago clic en el botón Cerrar y vuelvo a hacer clic en el enlace para ver los TOC otra vez, el cuadro de diálogo no aparece ... ¿Puede ayudarme por favor :(? –

I encontré el mismo problema (el diálogo solo se abriría una vez, después del cierre, no se abriría nuevamente), y probé las soluciones anteriores que no solucionaron mi problema. Volví a los documentos y me di cuenta de que tenía un malentendido fundamental sobre cómo funciona el diálogo.

El comando $ ('# myDiv'). Dialog() crea/crea una instancia del cuadro de diálogo, pero no es necesariamente la forma correcta de abrir. La forma correcta de abrirlo es crear una instancia del cuadro de diálogo con el cuadro de diálogo(), luego usar el cuadro de diálogo ('abrir') para mostrarlo y el cuadro de diálogo ('cerrar') para cerrarlo/ocultarlo. Esto significa que probablemente quiera configurar la opción autoOpen en falso.

Así que el proceso es: crear una instancia del diálogo en el documento listo, luego escuchar el clic o cualquier acción que desee mostrar el cuadro de diálogo. ¡Entonces funcionará, una y otra vez!

<script type="text/javascript"> 
     jQuery(document).ready(function(){  
      jQuery("#myButton").click(showDialog); 

      //variable to reference window 
      $myWindow = jQuery('#myDiv'); 

      //instantiate the dialog 
      $myWindow.dialog({ height: 350, 
       width: 400, 
       modal: true, 
       position: 'center', 
       autoOpen:false, 
       title:'Hello World', 
       overlay: { opacity: 0.5, background: 'black'} 
       }); 
      } 

     ); 
    //function to show dialog 
    var showDialog = function() { 
     //if the contents have been hidden with css, you need this 
     $myWindow.show(); 
     //open the dialog 
     $myWindow.dialog("open"); 
     } 

    //function to close dialog, probably called by a button in the dialog 
    var closeDialog = function() { 
     $myWindow.dialog("close"); 
    } 


</script> 
</head> 

<body> 

<input id="myButton" name="myButton" value="Click Me" type="button" /> 
<div id="myDiv" style="display:none"> 
    <p>I am a modal dialog</p> 
</div>

Fuente

2009-01-06 15:12:27 RaeLehman

Esto funcionó para mí, gracias! –

Gracias - esto resolvió mi problema! – Matt

+1, buen ejemplo, me ayudó. – Mark

Tuve el mismo problema y estaba buscando la manera de resolverlo que me trajo aquí. Después de revisar la sugerencia hecha por RaeLehman, me condujo a la solución. Aquí está mi implementación.

En mi evento $ (documento) .ready Inicializo mi cuadro de diálogo con el conjunto autoOpen en falso. También elegí vincular un evento de clic a un elemento, como un botón, que abrirá mi cuadro de diálogo.

$(document).ready(function(){ 

    // Initialize my dialog 
    $("#dialog").dialog({ 
     autoOpen: false, 
     modal: true, 
     buttons: { 
     "OK":function() { // do something }, 
     "Cancel": function() { $(this).dialog("close"); } 
    } 
    }); 

    // Bind to the click event for my button and execute my function 
    $("#x-button").click(function(){ 
     Foo.DoSomething(); 
    }); 
});

A continuación, asegúrese de que la función está definida y que es donde poner en práctica el método abierto de diálogo.

var Foo = { 
    DoSomething: function(){ 
     $("#dialog").dialog("open"); 
    } 
}

Por cierto, probé esto en IE7 y Firefox y funciona bien. ¡Espero que esto ayude!

Fuente

2009-05-27 08:20:23 Rickster

Gracias Rickster. Me funcionó bien, también :) –

Si es necesario utilizar varios cuadros de diálogo en una página y abrir, cerrar y volver a abrir a las siguientes obras así:

JS CODE: 
    $(".sectionHelp").click(function(){ 
     $("#dialog_"+$(this).attr('id')).dialog({autoOpen: false}); 
     $("#dialog_"+$(this).attr('id')).dialog("open"); 
    }); 

HTML: 
    <div class="dialog" id="dialog_help1" title="Dialog Title 1"> 
     <p>Dialog 1</p> 
    </div> 
    <div class="dialog" id="dialog_help2" title="Dialog Title 2"> 
     <p>Dialog 2 </p> 
    </div> 

    <a href="#" id="help1" class="sectionHelp"></a> 
    <a href="#" id="help2" class="sectionHelp"></a> 

CSS: 
    div.dialog{ 
     display:none; 
    }

Fuente

2010-01-14 19:02:12 Jon

<script type="text/javascript"> 
// Increase the default animation speed to exaggerate the effect 
$.fx.speeds._default = 1000; 
$(function() { 
    $('#dialog1').dialog({ 
     autoOpen: false, 
     show: 'blind', 
     hide: 'explode' 
    }); 

    $('#Wizard1_txtEmailID').click(function() { 
     $('#dialog1').dialog('open'); 
     return false; 
    }); 
    $('#Wizard1_txtEmailID').click(function() { 
     $('#dialog2').dialog('close'); 
     return false; 
    }); 
    //mouseover 
    $('#Wizard1_txtPassword').click(function() { 
     $('#dialog1').dialog('close'); 
     return false; 
    }); 

}); 



///////////////////////////////////////////////////// 
<div id="dialog1" title="Email ID"> 
                               <p> 
                                (Enter your Email ID here.) 
                                <br /> 
                               </p> 
                          </div> 
//////////////////////////////////////////////////////// 

<div id="dialog2" title="Password"> 
                               <p> 
                                (Enter your Passowrd here.) 
                                <br /> 
                               </p> 
                           </div>

Fuente

2010-04-02 18:26:17 Upali

Esto es un poco más concisa y también le permite tener diferentes los valores de diálogo, etc. basados en diferentes eventos de clic:

$('#click_link').live("click",function() { 
    $("#popup").dialog({modal:true, width:500, height:800}); 

    $("#popup").dialog("open"); 

    return false; 
});

Fuente

2010-04-09 00:03:46 djburdick

solución de RaeLehman funciona si sólo desea generar el contenido del cuadro de diálogo una vez (o sólo modificarlo usando javascript). Si realmente desea regenerar el diálogo cada vez (por ejemplo, utilizando una clase de modelo de vista y Razor), puede cerrar todos los cuadros de diálogo con $ (". Ui-dialog-titlebar-close"), haga clic en(); y deje el conjunto autoOpen en su valor predeterminado de verdadero.

Fuente

2011-03-28 21:00:11 Daniel

Mi solución: elimine algunas opciones de init (por ejemplo, mostrar), porque el constructor no cede si algo no funciona (por ejemplo, efecto de deslizamiento). Mi función sin la inserción de HTML dinámico:

function ySearch(){ console.log('ysearch'); 
    $("#aaa").dialog({autoOpen: true,closeOnEscape: true, dialogClass: "ysearch-dialog",modal: false,height: 510, width:860 
    }); 
    $('#aaa').dialog("open"); 

    console.log($('#aaa').dialog("isOpen")); 
    return false; 
}

Fuente

2012-06-23 09:59:04

Incluso me enfrentó problemas similares. Así es como yo era capaz de resolver el mismo

$("#lnkDetails").live('click', function (e) { 

     //Create dynamic element after the element that raised the event. In my case a <a id="lnkDetails" href="/Attendance/Details/2012-07-01" /> 
     $(this).after('<div id=\"dialog-confirm\" />'); 

     //Optional : Load data from an external URL. The attr('href') is the href of the <a> tag. 
     $('#dialog-confirm').load($(this).attr('href')); 

     //Copied from jQueryUI site . Do we need this? 
     $("#dialog:ui-dialog").dialog("destroy"); 

     //Transform the dynamic DOM element into a dialog 
     $('#dialog-confirm').dialog({ 
      modal: true, 
      title: 'Details' 
     }); 

     //Prevent Bubbling up to other elements. 
     return false; 
    });

Fuente

2012-08-22 08:34:27

Si desea cambiar la opacidad de diálogo para todos y luego cambian de jquery-ui.css

/* Overlays */ 
.ui-widget-overlay 
{ 
    background: #5c5c5c url(images/ui-bg_flat_50_5c5c5c_40x100.png) 50% 50% repeat-x; 
    opacity: .50; 
    filter: Alpha(Opacity=80); 
}

Fuente

2012-11-03 12:47:44

cuadro de diálogo jQuery

Respuesta

Cuestiones relacionadas