none
ModalPopUp Extender ajuda RRS feed

  • Pergunta

  • Galera preciso de uma ajudinha.

    tenho uma pagina onde tem varios imagebuttons. tenho uma funcao que de tempo em tempo ele da um "select" em cada imagebutton.

    quando for selecionado um determinado botao, ao clicar ENTER no teclado queria que abrisse um MODALPOPUP com a imagem em tamanho maior. só que faz um tempao e nao estou conseguindo fazer.

    Alguem da uma ajudinha?

    o codigo da minha pagina é esse

    <%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Doces.aspx.cs" Inherits="Doces" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
     <script>
         var cont = 0
         function troca() {
             if (cont == 0) {
                 var key1 = document.getElementById('MainContent_BotaoChocolate');
                 key1.focus();
             }
             if (cont == 1) {
                 var key1 = document.getElementById('MainContent_BotaoSorvete');
                 key1.focus();
             }
             if (cont == 2) {
                 var key1 = document.getElementById('MainContent_BotaoBala');
                 key1.focus();
             }
             if (cont == 3) {
                 var key1 = document.getElementById('MainContent_BotaoVoltar');
                 key1.focus();
             }
             if (cont == 4) {
                 var key1 = document.getElementById('MainContent_Botao');
                 key1.focus();
             }
             if (cont == 5) {
                 var key1 = document.getElementById('MainContent_Botao');
                 key1.focus();
             }
             if (cont == 6) {
                 var key1 = document.getElementById('MainContent_Botao');
                 key1.focus();
             }
             if (cont == 7) {
                 var key1 = document.getElementById('MainContent_Botao');
                 key1.focus();
             }
             if (cont == 8) {
                 var key1 = document.getElementById('MainContent_Botao');
                 key1.focus();
             }
             if (cont == 9) {
                 var key1 = document.getElementById('MainContent_Botao');
                 key1.focus();
             }
    
             cont++;
             if (cont >= 4)
                 cont = 0;
         }
    
       </script>
        
        <script>
            //Script para chamar o temporizador
    
            setInterval(function () { troca(); }, 2000);
        </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
            <asp:ImageButton ID="BotaoChocolate" runat="server" Height="180px" 
                             Width="160px" ImageUrl="~/Imagens/Chocolate.jpg" TabIndex="0" />
            &nbsp;&nbsp;&nbsp;&nbsp;
            <asp:ImageButton ID="BotaoSorvete" runat="server" Height="180px" 
                             Width="160px" ImageUrl="~/Imagens/Sorvete.jpg" TabIndex="0" />
            &nbsp;&nbsp;&nbsp;&nbsp;
            <asp:ImageButton ID="BotaoBala" runat="server" Height="180px" 
                             Width="160px" ImageUrl="~/Imagens/Bala.jpg" TabIndex="0" />
            &nbsp;&nbsp;&nbsp;&nbsp;
            <asp:ImageButton ID="BotaoVoltar" runat="server" Height="180px" 
                             Width="160px" ImageUrl="~/Imagens/Voltar.jpg" TabIndex="9" 
                             PostBackUrl="~/Comer.aspx" />
    </asp:Content>
    

    quinta-feira, 24 de outubro de 2013 23:19

Respostas

  • Boa Noite...

    Segue em anexo, alguns link para estudo:

    http://imasters.com.br/artigo/21250/dotnet/o-segredo-de-utilizar-modalpopupextender/

    http://www.w3schools.com/js/js_timing.asp

    Espero ter ajudado.


    Por favor, lembre-se de “Marcar como Resposta” as respostas que resolveram o seu problema. Essa é uma maneira comum de reconhecer aqueles que o ajudaram e fazer com que seja mais fácil para os outros visitantes encontrarem a resolução mais tarde.

    • Sugerido como Resposta Jean Carlos Galhardi quinta-feira, 24 de outubro de 2013 23:34
    • Marcado como Resposta Giovani Cr segunda-feira, 28 de outubro de 2013 14:00
    quinta-feira, 24 de outubro de 2013 23:24
  • Tenha na sua página um único

    <Ajax:ToolkitScriptManager runat="server" ID="ToolkitScriptManager1"></Ajax:ToolkitScriptManager>

    E

    Para cada ImageButton se vai fazer uma rotina dessa!

            
    <asp:ImageButton ID="ImgBut1" ImageUrl="~/img/1.jpg" Width="100" Height="100" runat="server" />
    
    <asp:Panel id="PnlImg1" runat="server" CssClass="modalPopup" Style="display:none" Width="600px">
    	<asp:Image ImageUrl="~/img/1.jpg" Width="400" Height="400" runat="server" />
    	<asp:Button Text="Fechar" ID="cmdFechar" runat="server" />
    </asp:Panel>
    
    <Ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
    	BackgroundCssClass="modalBackground"
    	CancelControlID="cmdFechar" DropShadow="true"
    	PopupControlID="PnlImg1" 
    	TargetControlID="ImgBut1">
    </Ajax:ModalPopupExtender>

    ImageButton: Img1 é o botão que aciona o Modal

    Panel: PnlImg1 é o panel que fica sem aparecer ou seja, com css display none

    ModalPopupExtender: ModalPopupExtender1 é o que aciona quando você clica no ImageButton Img1

    aonde sua propriedades PopupControlId é o Id do Panel que ta com display none e o TargetControlId é o ImageButton que vai acionar esse Modal 

    Mas exemplos: http://www.aspsnippets.com/Articles/Building-Modal-Popup-using-ASPNet-AJAX-ModalPopupExtender-Control.aspx


    Fúlvio Cezar Canducci Dias


    sexta-feira, 25 de outubro de 2013 00:09

Todas as Respostas

  • Boa Noite...

    Segue em anexo, alguns link para estudo:

    http://imasters.com.br/artigo/21250/dotnet/o-segredo-de-utilizar-modalpopupextender/

    http://www.w3schools.com/js/js_timing.asp

    Espero ter ajudado.


    Por favor, lembre-se de “Marcar como Resposta” as respostas que resolveram o seu problema. Essa é uma maneira comum de reconhecer aqueles que o ajudaram e fazer com que seja mais fácil para os outros visitantes encontrarem a resolução mais tarde.

    • Sugerido como Resposta Jean Carlos Galhardi quinta-feira, 24 de outubro de 2013 23:34
    • Marcado como Resposta Giovani Cr segunda-feira, 28 de outubro de 2013 14:00
    quinta-feira, 24 de outubro de 2013 23:24
  • Tenha na sua página um único

    <Ajax:ToolkitScriptManager runat="server" ID="ToolkitScriptManager1"></Ajax:ToolkitScriptManager>

    E

    Para cada ImageButton se vai fazer uma rotina dessa!

            
    <asp:ImageButton ID="ImgBut1" ImageUrl="~/img/1.jpg" Width="100" Height="100" runat="server" />
    
    <asp:Panel id="PnlImg1" runat="server" CssClass="modalPopup" Style="display:none" Width="600px">
    	<asp:Image ImageUrl="~/img/1.jpg" Width="400" Height="400" runat="server" />
    	<asp:Button Text="Fechar" ID="cmdFechar" runat="server" />
    </asp:Panel>
    
    <Ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
    	BackgroundCssClass="modalBackground"
    	CancelControlID="cmdFechar" DropShadow="true"
    	PopupControlID="PnlImg1" 
    	TargetControlID="ImgBut1">
    </Ajax:ModalPopupExtender>

    ImageButton: Img1 é o botão que aciona o Modal

    Panel: PnlImg1 é o panel que fica sem aparecer ou seja, com css display none

    ModalPopupExtender: ModalPopupExtender1 é o que aciona quando você clica no ImageButton Img1

    aonde sua propriedades PopupControlId é o Id do Panel que ta com display none e o TargetControlId é o ImageButton que vai acionar esse Modal 

    Mas exemplos: http://www.aspsnippets.com/Articles/Building-Modal-Popup-using-ASPNet-AJAX-ModalPopupExtender-Control.aspx


    Fúlvio Cezar Canducci Dias


    sexta-feira, 25 de outubro de 2013 00:09