•  21-08-2019
  •  | 
  •  

Pregunta

Im tratando de hacer un cuadro de diálogo con jQuery. En este cuadro de diálogo Im va a tener términos y condiciones. El problema es que el cuadro de diálogo sólo se muestra para la primera vez.

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 que creo es que cuando se cierra el cuadro de diálogo de la DIV se destruye desde el código html therfore nunca puede ser representada de nuevo en la pantalla.

Puede usted por favor ayuda!

Gracias

¿Fue útil?

Solución

Parece que hay un problema con el código que envió. Su función para visualizar los T & C hace referencia a la div mal ID. 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>

Otros consejos

Me encontré con el mismo problema (de diálogo sólo abriría una vez, después del cierre, no se abriría de nuevo), y trató de las soluciones por encima del cual no se soluciona mi problema. Volví a la documentación y se dio cuenta que tenía un malentendido fundamental de cómo funciona el diálogo.

comando

El $ ( '# myDiv'). de diálogo () crea / instancia el diálogo, pero no es necesariamente la forma correcta de Abrir ella. La forma correcta de abrir es crear una instancia de diálogo con el diálogo (), a continuación, utilizar el diálogo ( 'abierto') para mostrarlo y de diálogo ( 'cerrar') para cerrar / ocultarlo. Esto significa que es probable que desee para establecer la opción Autoopen a falso.

Así que el proceso es: una instancia del diálogo sobre el documento listo, a continuación, escuchar el chasquido o cualquier acción que desea mostrar el cuadro de diálogo. Entonces todo funcionará bien, 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>

Yo tenía el mismo problema y estaba buscando una manera de solucionarla lo que me ha traído hasta aquí. Después de revisar la sugerencia hecha de RaeLehman me llevó a la solución. Aquí está mi aplicación.

En mi $ (document) evento ready Me inicializar mi diálogo con el Autoopen establece en false. También he elegido para unirse a un evento de clic a un elemento, como un botón, que se abrirá mi 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, he probado esto en IE7 y Firefox y funciona bien. Esperamos que esto ayude!

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;
    }

La 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 volver a generar el diálogo cada vez (por ejemplo, utilizando una clase de vista de modelo y de la maquinilla de afeitar), entonces se puede cerrar todos los diálogos con $ haga clic en () ( "ui-diálogo-barra de título de cerca.."); y dejar conjunto Autoopen a su valor predeterminado de verdad. 

<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>

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

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

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

    return false;
});

Mi solución: eliminar algunas opciones de inicialización, como el rendimiento del constructor duerma si algo no está funcionando (efecto ex diapositiva) (ex espectáculo.). 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;
}

Incluso me enfrentaba a 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;
    });

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);
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top