controle ASP.NET em JQuery modal
-
10-07-2019 - |
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.
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.