Abrir janela modal no click

Front-end

22/03/2014

OLa galera estou com um problema, no envio de email de um formulario coloquei uma janela modal para mostrar se o email foi enviado com sucesso. Esta funcionando legal, com exceção de que mesmo se o usuário nao preencher nada no campo ele mostra a janela modal, fiz um script para mostrar uma mensagem ao lado do textbox que o campo é obrigatório, isso não acontece no click.

se o usuário clicar sem preencher nada eme mostra a janela modal mesmo assim, e a janela é somente se o usuário preencheu os campos e foi enviado com sucesso.

alguém pode me ajudar.
Celiol.

Celiol.

Curtidas 0

Respostas

Claudio Lopes

Claudio Lopes

22/03/2014

Aparentemente, o start da sua janela modal está sendo iniciado assim que o butão é clicado. Coloque após a validação dos campos, que creio eu, esteja usando de if e else if...

se não funcionar poste o código para que possamos lhe ajudar...

GOSTEI 0
Celiol.

Celiol.

22/03/2014

sim esta no botao mesmo, mas como vai abrir a janela modal se nao tiver dentro de um link? minha validação é sim cara dentro de um IF...ELSE
GOSTEI 0
Claudio Lopes

Claudio Lopes

22/03/2014

posta o codigo do script ai
GOSTEI 0
Celiol.

Celiol.

22/03/2014

Olha cara ta o codigo este meu java script que faz a validação dos campos e tambem o código que abre a janela modal...
       <script type="text/javascript">
          /* java janela modal serviços */
          var $j = jQuery.noConflict();

          $j(document).ready(function () {
              var nome = $("#txtNome").val();
              var mail = $("#txtEmailC").val();
              var fone = $("#txtFoneC").val();

              if (nome == "") {
                  $("#msgnome").text("O nome é obrigatório!");
                  
              } else if (mail == "") {
                  var filtro = /^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})$/i;
                  if (filtro.test(email)) {
                      //envia email
                  } else {
                      $("#msgmail").text("O e-mail informado é inválido!");
                      return false;
                  }
              } else if(fone == ""){
                  $("#msgfone").text("Informe seu telefone ou celular!");

              } else if (nome != "" && mail != "" && fone != "") {
                //$(document).ready(function () {

                    $("a[rel=modal]").click(function (ev) {
                        ev.preventDefault();

                        var id = $(this).attr("href");

                        var maskHeight = $(document).height();
                        var maskWidth = $(window).width();

                        //colocando cor de fundo
                        $('#mask').css({ 'width': maskWidth, 'height': maskHeight });
                        $('#mask').fadeIn(1000);
                        $('#mask').fadeTo("slow", 0.8);

                        var winH = $(window).height();
                        var winW = $(window).width();

                        $(id).css('top', winH / 2 - $(id).height() / 2);
                        $(id).css('left', winW / 2 - $(id).width() / 2);
                        $(id).fadeIn(2000);
                    });

                    $('.window .close').click(function (ev) {
                        ev.preventDefault();
                        $('#mask').hide();
                        $('.window').hide();
                    });

                    $('#mask').click(function () {
                        $(this).hide();
                        $('.window').hide();
                    });
                //});
            }

          });
       </script>

e aqui meu botao com o codigo que chama a modal no click ...
      <div class="form_botao">
            <a href="#janela1" rel="modal">
              <asp:ImageButton ID="btnEnviar" runat="server" ImageUrl="botoes/enviar.jpg" CssClass="botaoContato"  onclick="btnEnviar_Click" UseSubmitBehavior="False" />
             </a>
                    </div>


ha detalhe tenho uma marca d'agua nos campos sem a validação ele envia o email mas com os valores da carcad'agua cara.
Pode ajudar?
GOSTEI 0
Claudio Lopes

Claudio Lopes

22/03/2014

vamos por parte, faltou a function btnEnviar_Click, é ela que eu quero ver....
GOSTEI 0
Celiol.

Celiol.

22/03/2014

ha sim o codbehid...
    protected void btnEnviar_Click(object sender, ImageClickEventArgs e)
        {
            if (txtNome.Text == "Digite o nome completo" || txtEmailC.Text == "seuemail@email.com.br" || txtFoneC.Text == "(99) 99999 - 9999")
            { txtNome.Focus();  }
            else
            {
                try
                {
                    string servidor = ConfigurationManager.AppSettings["servidor"].ToString();
                    string emailContato = ConfigurationManager.AppSettings["emailContato"].ToString();
                    string senhaContato = ConfigurationManager.AppSettings["senha"].ToString();

                    StringBuilder corpo = new StringBuilder();
                    corpo.Append("Delivery - TI");
                    corpo.Append("<br />Dados enviados para contato:");
                    corpo.Append("<br />Nome: " + txtNome.Text);
                    corpo.Append("<br />Email: " + txtEmailC.Text);
                    corpo.Append("<br />Empresa: " + txtEmpresa.Text);
                    corpo.Append("<BR />Assunto: " + ddlAssunto.Text);
                    corpo.Append("<br />Telefone: " + txtFoneC.Text);
                    corpo.Append("<br />Menssagem: " + txtMess.Text);
                    corpo.Append("<br/><br/>");
                    corpo.Append("<br/> Nao responda este email, ele foi enviado altomáticamente.");
                    corpo.Append("<br/> Se quiser entrar em contato com a Delivery-TI acesse: www.deliveryti.com/contato");

                    //configuração do email
                    MailMessage mailMessage = new MailMessage();
                    mailMessage.CC.Add(emailContato);
                    mailMessage.From = new MailAddress(emailContato);
                    mailMessage.To.Add(txtEmailC.Text);
                    mailMessage.Priority = MailPriority.Normal;
                    mailMessage.Subject = "Email enviado por Delivery-TI";
                    mailMessage.IsBodyHtml = true;
                    mailMessage.Body = corpo.ToString();
                    mailMessage.SubjectEncoding = Encoding.GetEncoding("ISO-8859-1");
                    mailMessage.BodyEncoding = Encoding.GetEncoding("ISO-8859-1");

                    //configuração do servidor
                    SmtpClient objSMTP = new SmtpClient(servidor);

                    //smtp.Port = 587;
                    objSMTP.EnableSsl = true;
                    objSMTP.Credentials = new NetworkCredential(emailContato, senhaContato);
                    objSMTP.Send(mailMessage);

                    objSMTP.Host = "pop.gmail.com";
                    objSMTP.Credentials = new NetworkCredential("login", "senha");

                    //enviar email
                    objSMTP.Send(mailMessage);
                  

                    txtNome.Text = "";
                    txtEmailC.Text = "";
                    txtEmpresa.Text = "";
                    txtFoneC.Text = "";
                    txtMess.Text = "";

                
                }
                catch(Exception) {

                    txtNome.Text = "";
                    txtEmailC.Text = "";
                    txtEmpresa.Text = "";
                    txtFoneC.Text = "";
                    txtMess.Text = "";
                }

            }
        }
GOSTEI 0
Claudio Lopes

Claudio Lopes

22/03/2014

Cara não conheço mutio de ASP, não consegui localizar como você está chamando a modal, é via js?
GOSTEI 0
Celiol.

Celiol.

22/03/2014

ha onde chamo cara é no evento click do botao, e sim é um javascript olha ai:

aqui e o botao e junto a ele o link para abrir a janela modal ve ai.
   <div class="form_botao">
                       <a href="#janela1" rel="modal">       ----------->>>>>>>>>>>>>>>>>>>>> aqui onde esta o link que abre a janela ta vendo


                           <asp:ImageButton ID="btnEnviar" runat="server" ImageUrl="botoes/enviar.jpg" CssClass="botaoContato" 
                            onclick="btnEnviar_Click" TabIndex="7" UseSubmitBehavior="False" />

                        </a>
                    </div>

aqui é o conteudo que sera mostrado na janela apenas uma mensagem e um botao para voltar para home
     <div class="window2" id="janela1"><br/>
                        <%-- personalizando a janela --%>
                     <div class="text_jan">
                        <div class="header2">
                            <h5 style="font-family:Verdana; color:White; margin-top:20px; font-weight:bold; font-size:larger; margin-left:-10px;">
                                E-mail enviado com sucesso</h5>
                          </div>
                        <p class="texto_modal" >
                                 Obrigado por entrar em contato com a Delivery-TI.<br/>
                                 Em breve entraremos em contato.<br/>
                        </p><br/><br/>
                        <a href="home.aspx" class="btnmodal" title="Home">Continuar</a>
                      </div>
                    </div>


e por fim o javascript cara que faz com que tudo aconteça. Ha so nao coloqueiu aqui o CSS pois e apenas estilização do conteudo. BLZ
    <script type="text/javascript">
          /* java janela modal serviços */
          var $j = jQuery.noConflict();

          $j(document).ready(function () {
              var nome = $("#txtNome").val();
              var mail = $("#txtEmailC").val();
              var fone = $("#txtFoneC").val();

              if (nome != "" && mail != "" && fone != "") {
                //$(document).ready(function () {

                    $("a[rel=modal]").click(function (ev) {
                        ev.preventDefault();

                        var id = $(this).attr("href");

                        var maskHeight = $(document).height();
                        var maskWidth = $(window).width();

                        //colocando cor de fundo
                        $('#mask').css({ 'width': maskWidth, 'height': maskHeight });
                        $('#mask').fadeIn(1000);
                        $('#mask').fadeTo("slow", 0.8);

                        var winH = $(window).height();
                        var winW = $(window).width();

                        $(id).css('top', winH / 2 - $(id).height() / 2);
                        $(id).css('left', winW / 2 - $(id).width() / 2);
                        $(id).fadeIn(2000);
                    });

                    $('.window2 .close').click(function (ev) {
                        ev.preventDefault();
                        $('#mask').hide();
                        $('.window2').hide();
                    });

                    $('#mask').click(function () {
                        $(this).hide();
                        $('.window2').hide();
                    });
                //});
            }

          });
       </script>


se puer ajudar cara ainda nao consegui fazer essa joça.
GOSTEI 0
Claudio Lopes

Claudio Lopes

22/03/2014

é cara, vou conseguir te ajudar não, utilizou outra estrutura para chamar as modal faço assim?

no botão chamo um função no evento onlcick

       <input type="button" name="btnEnviar" id="btnEnviar" onclick="fcEnviar()">



na função faco o seguinte:

function fcEnviar(){
   //via ajax, faço o envio das informações via POST e faço o tratamento em uma outra pagina e retorno 1 ou 0 com o resultado

 $.post('pagina.php',enviaEmail:1,email:email},function(data){
		//verifica o retorno
		 if(data == 1){
		   //email enviado
		   ***chama a modal aqui!*****
		}else{
		   **** trata o erro aqui!****
		}
	});
}


Não entendo porque no ASP isso muda, isso ai é pura jquery
GOSTEI 0
Celiol.

Celiol.

22/03/2014

entao pensei em fazer isso mas posso chamar o javascript no evento click?
GOSTEI 0
Claudio Lopes

Claudio Lopes

22/03/2014

Sim, pois assim você faz todas as validações que quiser. tenta ai qualquer coisa me chama aqui....
GOSTEI 0
Celiol.

Celiol.

22/03/2014

cara estou tentando mas, reparei que você chama outra pagina no evento click, ai tudo beleza. Mas quero apenas exibir a mensagem de enviado com sucesso mas não em uma pagina e sim uma janelinha modal. Então pensei ja que no fim do evento mostro a mensagem de "enviado com sucesso" sera que da pra chamar e mostrar a função do jquery que cria minha modal? Como posso chamar uma função do jquery no evento click?

obrigado cara.
GOSTEI 0
Lucas Burg

Lucas Burg

22/03/2014

Opa! talvez posso ajudar...

$(seu_elemento).Click(sua_funcao(parametro) {
//seu codigo
});
GOSTEI 0
Celiol.

Celiol.

22/03/2014

Então cara tentei isso ai mas só pra deixar mais claro que tenho que fazer é assim. Tenho um formulário que envia email era enviando certinho quando clivo em enviar blz. Mas meu cliente viu em site e quer igual o seguinte, quando o cara clicar enviar, abrir uma janela modal avisando que enviado ck sucesso e um botão para voltar para nome, ai tudo blz fiz. Agora só não sei como fazer para mostrar a janela apenas quando enviar, coloquei o link da janela modal no botão mas ai se o cara clicar enviar mesmo sem preencher ele da o erro da validação e abre a modal, mas não é para abrir a modal ela só abre se o formulário estiver preenchido e enviado, se não ele mostra a mensagem no formulário memso.

Ai me indicaram para chamar no evento click, mas como posso chamar uma função do jquery no click, em asp.net?

Abraços Miller.
GOSTEI 0
Celiol.

Celiol.

22/03/2014

Então cara tentei isso ai mas só pra deixar mais claro que tenho que fazer é assim. Tenho um formulário que envia email era enviando certinho quando clivo em enviar blz. Mas meu cliente viu em site e quer igual o seguinte, quando o cara clicar enviar, abrir uma janela modal avisando que enviado ck sucesso e um botão para voltar para nome, ai tudo blz fiz. Agora só não sei como fazer para mostrar a janela apenas quando enviar, coloquei o link da janela modal no botão mas ai se o cara clicar enviar mesmo sem preencher ele da o erro da validação e abre a modal, mas não é para abrir a modal ela só abre se o formulário estiver preenchido e enviado, se não ele mostra a mensagem no formulário memso.

Ai me indicaram para chamar no evento click, mas como posso chamar uma função do jquery no click, em asp.net?

Abraços Miller.
GOSTEI 0
Lucas Burg

Lucas Burg

22/03/2014

Vish mano ai complico pra mim haha, desculpa ai..

Abç
GOSTEI 0
POSTAR