•  21-08-2019
  •  | 
  •  

Pergunta

Im tentando fazer uma caixa de diálogo com jQuery. Nesta caixa de diálogo Im vai ter termos e condições. O problema é que a caixa de diálogo só é exibido pela primeira vez.

Este é o 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>

O problema que eu acho é que quando você fecha a caixa de diálogo do DIV é destruída a partir do código html therfore nunca pode ser exibido novamente na tela.

Você pode por favor me ajude!

Graças

Foi útil?

Solução

Parece que há um problema com o código que você postou. Sua função para exibir o T & C está referenciando o errado div id. Você deve considerar atribuir a função showTOC ao atributo onclick uma vez que o documento é carregado assim: 

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

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

Um exemplo mais concisa, que realiza o efeito desejado usando o diálogo jQuery UI é: 

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

Outras dicas

Eu encontrei o mesmo problema (diálogo somente abriria uma vez, após o fechamento, que não iria abrir novamente), e tentou as soluções acima do qual não resolver o meu problema. Voltei para os docs e percebi que tinha uma incompreensão fundamental de como funciona o diálogo.

A caixa de diálogo $ ( '# myDiv'). () Comando cria / instancia de diálogo, mas não é necessariamente a maneira correta de open isso. A maneira correta para abri-la é instanciar o diálogo com diálogo (), em seguida, usar de diálogo ( 'aberto') para exibi-lo, e de diálogo ( 'close') para fechar / escondê-lo. Isso significa que você provavelmente vai querer definir a opção AutoOpen para falsa.

Assim, o processo é: instanciar o diálogo sobre o documento pronto, em seguida, ouvir o clique ou qualquer ação que você quer mostrar a janela. Em seguida, ele vai trabalhar, vez após 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>

Eu tive o mesmo problema e estava procurando uma maneira de resolvê-lo o que me trouxe aqui. Depois de analisar a sugestão feita a partir de RaeLehman ele me levou para a solução. Aqui está a minha aplicação.

Na minha $ (document) .ready evento I inicializar o meu diálogo com o conjunto AutoOpen para falso. Eu também optou por vincular um evento de clique a um elemento, como um botão, o que vai abrir minha caixa 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();
    });
});

Em seguida, eu certificar-se de que a função está definida e que é onde eu implementar o método aberto de diálogo. 

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

A propósito, eu testei isso no IE7 e Firefox e funciona bem. Espero que isso ajude!

Se você precisa usar várias caixas de diálogo em uma página e abrir, fechar e reabrir-los a seguir funciona bem: 

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

A solução da RaeLehman funciona se você só quer gerar o conteúdo do diálogo uma vez (ou única modificá-lo usando javascript). Se você realmente quer para regenerar o diálogo cada vez (por exemplo, usando uma classe de vista do modelo e Razor), então você pode fechar todos os diálogos com US $ clique () ( "ui-dialog-titlebar perto.."); e deixar AutoOpen conjunto com o seu valor padrão de true. 

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

Este é um pouco mais conciso e também permite que você tenha diferentes valores de diálogo etc com base em diferentes eventos de clique: 

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

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

    return false;
});

A minha solução: remover algumas opções de inicialização, porque o rendimento construtor doesnt se algo não está funcionando (efeito ex slides) (ex show.). Minha função sem inserção 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;
}

Mesmo eu enfrentei problemas semelhantes. Isto é como eu era capaz de resolver o mesmo 

    $("#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;
    });

Se você quer mudar a opacidade para todos de diálogo, em seguida, mudar em 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 em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top