Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

IgorC

Caixa de diálogo "Modal confirmation" jquery ui

Por , em Javascript

Recommended Posts

IgorC    0

IgorC
Postado

Olá pessoal, estou quebrando a cabeça aqui e não estou conseguindo resolver...

Eu baixei o código exemplo da caixa de diálogo do jQuery UI, a "modal confirmation": https://jqueryui.com/dialog/#modal-confirmation

Nesse código exemplo, ao abrir a página da web já aparece a caixa de diálogo automaticamente, minha dúvida é: se eu tenho um botão, como faço para chamar esse função e a caixa de diálogo abrir? E como faço para desabilitar isso dela abrir automaticamente quando abro a página? Obrigado antecipadamente.

 

Caso não queiram entrar no link, o código exemplo é esse abaixo:

<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>jQuery UI Dialog - Modal confirmation</title>  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">  <script src="//code.jquery.com/jquery-1.10.2.js"></script>  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  <link rel="stylesheet" href="/resources/demos/style.css">  <script>  $(function() {    $( "#dialog-confirm" ).dialog({      resizable: false,      height:140,      modal: true,      buttons: {        "Delete all items": function() {          $( this ).dialog( "close" );        },        Cancel: function() {          $( this ).dialog( "close" );        }      }    });  });  </script></head><body> <div id="dialog-confirm" title="Empty the recycle bin?">  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p></div> <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>  </body></html>

Alguém?

Compartilhar este post

Link para o post
Compartilhar em outros sites

wanderval    19

wanderval
Postado 
<script>
 function abrirDialog() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
      buttons: {
        "Delete all items": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
  });
}
  </script>

essa é a forma mais simples

<input type="button" value="dialog"onclick="abrirDialog()"/>

existem outras formas onde o jquery escuta a ação sobre o botão não sendo necessario deixarm evidencia a chamada atravez do onclick. espero ter ajudado

Compartilhar este post

Link para o post
Compartilhar em outros sites

IgorC    0

IgorC
Postado

Opa, ajudou sim WANDERVAL, só não vou marcar com resolvido pois tenho mais uma dúvida, tem como fazer uma caixa de diálogo parecida com essa, porém mais leve? Eu não gostei muito desse tipo de caixa de diálogo, você ou alguém poderia ensinar como fazer uma caixa de diálogo mais simples? Dessa forma eu poderia ver os códigos e estudar melhor, esse exemplo que eu mostrei acima é muito complicado, sou novo em javascript. Esse exemplo que eu peço poderia ser algo bem simples do tipo se a pessoa clicar em tal botão, escurecer o fundo e aparecer as opções sim ou não, eu sei que é praticamente a mesma coisa disso que eu postei, mas, como já disse, não me familiarizei muito com esse script... Quem puder ajudar eu agradeço, muito obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

wanderval    19

wanderval
Postado

tem uma forma utilizando bootstrap vc constroi a janela modal com o propio html utilizando o padrao bootstrap que vem como default display none e se torna visivel atravez do javascript

$('elemento').modal('show');

utilizado para janelas modais

url:http://getbootstrap.com/javascript/

 

agora para alert customizados

http://nakupanda.github.io/bootstrap3-dialog/

 

mais te aconselho estudar um pouco mais a fundo javascript como objetos literais

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito