none
Abrir modal jquery RRS feed

  • Pergunta

  • Bom dia pessoal!

       Para abri uma modal eu insiro antes do <\head>

        <script type="text/javascript">
            $(document).ready(function () {
                $('a[name=modal]').click(function (e) {
                    e.preventDefault();

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

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

                    $('#mask').css({ 'width': maskWidth, 'height': maskHeight });

                    $('#mask').fadeIn(400);
                    $('#mask').fadeTo("slow", 0.8);

                    //Get the window height and width
                    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(400);

                });

                $('.window .close').click(function (e) {
                    e.preventDefault();

                    $('#mask').hide();
                    $('.window').hide();
                });

                $('.window_2 .close_2').click(function (e) {
                    e.preventDefault();

                    $('#mask').hide();
                    $('.window_2').hide();
                });

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

    no botão insiro:

    <a href="#dialog4" name="modal" >

    E depois faço minha modal, ok isto funciona..

    porém se eu estiver em um grid como eu faria para abrir esta modal.

    Tucããão vc q eh o cara em jQuery, vc manja?

    quinta-feira, 30 de agosto de 2012 22:11

Respostas

  • Exatamente tucão, tenta ae me diz se deu certo!!!

    Se a resposta foi útil por favor qualifique! Janderson Candido de Mattos - MCTS

    • Marcado como Resposta Douglas Bertelli sexta-feira, 31 de agosto de 2012 04:17
    sexta-feira, 31 de agosto de 2012 01:10

Todas as Respostas

  • Ohhh tucão, esse negócio de tucão ta pegando rsrsrsrsrs

    seguinte cara, deixa eu entender, você vai disparar a Modal de dentro de uma Grid certo? É isto?

    Se for isto você pode definir uma classe para o controle que esta dentro da grid, por exemplo se for um buttom:

    <asp:Button ID="btnEnviar" cssClass="TesteModal" runat="server" Text="Botão de Teste" Width="100px" OnClick="btnEnviar_Click"/>

    $('.TesteModal').click(function (e) {
                    e.preventDefault();
    
                    var id = $(this).attr('href');
    
                    var maskHeight = $(document).height();
                    var maskWidth = $(window).width();
    
                    $('#mask').css({ 'width': maskWidth, 'height': maskHeight });
    
                    $('#mask').fadeIn(400);
                    $('#mask').fadeTo("slow", 0.8);
    
                    //Get the window height and width
                    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(400);
    
                });
    Espero ter ajudado você tuco, qualquer coisa da um grito aqui!!


    Se a resposta foi útil por favor qualifique! Janderson Candido de Mattos - MCTS


    sexta-feira, 31 de agosto de 2012 00:43
  • Então tuco louco hahaua

     então vc diz que é só trocar esta parte:

        <script type="text/javascript">
            $(document).ready(function () {
                $('a[name=modal]').click(function (e) {

      por:
     

         <script type="text/javascript">
            $(document).ready(function () {
            $('.TesteModal').click(function (e) {

      Se for seria ótimo, pq dentro do grid não da para chamar este "name" aí sempre fica complicado.

    sexta-feira, 31 de agosto de 2012 01:07
  • Exatamente tucão, tenta ae me diz se deu certo!!!

    Se a resposta foi útil por favor qualifique! Janderson Candido de Mattos - MCTS

    • Marcado como Resposta Douglas Bertelli sexta-feira, 31 de agosto de 2012 04:17
    sexta-feira, 31 de agosto de 2012 01:10
  • Pow mr. infelizmente não deu certo não =\
    sábado, 22 de setembro de 2012 01:43
  • Bom, para o pessoal q quiser abrir uma modal atraves do grid segue tuto basic:

     grid:

                                               <asp:TemplateField>

                                                <ItemTemplate>                                                
                                                     <a href="#dialog2" class="btnAlterar">
                                                        <asp:Button
                                                            ID="btnAlterar" 
                                                            runat="server" 
                                                            CausesValidation="False"                                                        
                                                            CommandName="del"
                                                            CommandArgument='<%#Eval("cod_usuario")%>'
                                                            OnClientClick="javascript:return Abrir();" />
                                                     </a>                                              
                                                </ItemTemplate>
                                                <ItemStyle Width="25px" />
                                            </asp:TemplateField>

    acima da tag head:

          <script type="text/javascript">
            function pageLoad() {
                $(document).ready(function () {
                    $('a[class=btnAlterar]').click(function (e) {
                        e.preventDefault();
                        var id = $(this).attr('href');

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

                        $('#mask').css({ 'width': maskWidth, 'height': maskHeight });

                        $('#mask').fadeIn(400);
                        $('#mask').fadeTo("slow", 0.8);

                        //Get the window height and width
                        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(400);

                    });

                    $('.window .close').click(function (e) {
                        e.preventDefault();

                        $('#mask').hide();
                        $('.window').hide();
                    });

                    $('.window_2 .close_2').click(function (e) {
                        e.preventDefault();

                        $('#mask').hide();
                        $('.window_2').hide();
                    });

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

    no css cria a class .btnAlterar {background-image:url(../Portal/IMG/alt.png);}

    bom e aí logicamente deve-se criar tda modal na sua página no meu caso eu chamei a #dialog2 =) Abraço a todos!

    sábado, 22 de setembro de 2012 02:05
  • Infelizmente não funciona, abre a modal normalmente porém ele nao roda o rowcommand, assim evitando que rode o commandname e não preenchendo os campos da dialog3 =\
    sábado, 22 de setembro de 2012 17:42