Pergunta

Ok, eu sou novo para JQuery, eu tenho um modal que tem um controle asp: Literal nele. A literal é controlado por qualquer link é clicado para ativar o modal. Então, eu esperava que seria tão fácil como dar o valor literal onClick do link, mas não é isso.

Eu estou esperando: o valor do literal é definido no carregamento da página, então eu tenho que colocá-lo em um painel de atualização por isso vai mudar quando o link é clicado.

Ou poderia ser: como JavaScript você tem que ajustar dinamicamente o valor do literal com JQuery onClick.

Obrigado por sua ajuda.

Atualizar

Aqui está o HTML para o modal:

<div class="modal-holder" id="landing-page-modal" style="display:none">
  <div class="modal">
    <div class="modal-t">
      <a href="#" class="modal-close">
        <img src="images/modal-close.gif" border="0" alt="" />
      </a>
      <div class="modal-scroll">
        <a href="#" class="modal-top-arrow">
          <img src="images/modal-arr-t.gif" alt="" />
        </a>
        <a href="#" class="modal-bottom-arrow">
          <img src="images/modal-arr-b.gif" alt="" />
        </a>
      </div>
      <div class="modal-b">
        <div class="modal-content">
          <h2><asp:Label ID="lblModal" Text="Title" runat="server" /></h2>
          <p>
            <asp:Literal ID="litModal" Text="Test Data Lives Here For Now" runat="server" />
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Aqui está o JQuery que ativa o modal quando um link é clicado:

$('.article a, #menu a, #features a').click(function(){
  $('.modal-holder').css({'display': 'block'});
  return false;
});

$('.modal-close').click(function(){ 
  $('.modal-holder').css({'display': 'none'}); 
});

Eu quero saber como alterar o valor do controle "litModal" dentro do modal antes que ele está ativo.

Foi útil?

Solução

Ok, então você tem um literal na sua <p>. Isso significa que você não tem selector / pega direto a ele, como você faria quando era uma etiqueta com um ID.

Mas você pode dizer que é a <p> dentro do <div class="modal-content">, toda a parte do elemento com landing-page-modal ID:

"#landing-page-modal div.modal-content p"

Então, você precisa modificar a sua função que faz toda a coisa visível:

$('.article a, #menu a, #features a').click( function(clickTarget){
  // set the text of the <p> to whatever you like. I took 
  // the text of the element that was clicked by the user.
  $('#landing-page-modal div.modal-content p').text( $(clickTarget).text() ); 

  // now make the whole thing visible
  $('#landing-page-modal').css({'display': 'block'});
  return false;
});

Outras dicas

Se quiser que o modal para client-side mudança quando o link é clicado, você precisará configurá-lo no manipulador onClick para o link. Eu vou assumir que o texto modal é baseado na tag âncora que é clicado. litModal vai se transformar em uma extensão no lado do cliente para que encontrá-lo dessa forma.

    $('.article a, #menu a, #features a').click(function(anchor){
             var val = jQuery(anchor).text();
            // modify val as needed
            $('span#litModal').text(  val );
            $('.modal-holder').css({'display': 'block'});
            return false;
    });
    $('.modal-close').click(function(){ $('.modal-holder').css({'display': 'none'}); });

Nota: Eu estou fazendo a suposição de que você só tem um destes por página. Se não, então você precisa descobrir como referência o modal especial que se aplica à ligação em causa.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top