ASP.NET контроль в JQuery модальный - PullRequest
Новая
       27

ASP.NET контроль в JQuery модальный

2 голосов
/ 24 ноября 2008

Хорошо, я новичок в JQuery, у меня есть модал, в котором есть элемент asp: Literal. Литерал управляется любой ссылкой, по которой щелкают, чтобы активировать модальное. Итак, я надеялся, что это будет так же просто, как дать буквальное значение onClick ссылки, но это не так.

Я надеюсь: значение литерала устанавливается при загрузке страницы, поэтому я должен поместить его в панель обновлений, чтобы он изменился при нажатии на ссылку.

Или это может быть так: как и в javascript, вы должны динамически устанавливать значение литерала с помощью JQuery onClick.

Спасибо за вашу помощь.

UPDATE

Вот HTML-код для модального: 

<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>

Вот JQuery, который активирует модальный режим при нажатии на ссылку: 

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

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

Я хочу знать, как изменить значение элемента управления «litModal» в модальном режиме до его активации.

Ответы [ 2 ]

1 голос
/ 24 ноября 2008

Хорошо, у вас есть литерал в вашем <p>. Это означает, что у вас нет прямого селектора / дескриптора, как это было бы, если бы это была метка с идентификатором.

Но вы можете сказать, что это <p> внутри <div class="modal-content">, все части элемента с идентификатором landing-page-modal: 

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

Так что вам нужно изменить свою функцию, чтобы сделать все это видимым: 

$('.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;
});
0 голосов
/ 24 ноября 2008

Если вы хотите, чтобы модал изменял клиентскую сторону при щелчке по ссылке, вам нужно будет установить его в обработчике onClick для ссылки. Я предполагаю, что модальный текст основан на щелчке тега привязки. litModal превратится в промежуток на стороне клиента, поэтому мы находим его таким образом. 

    $('.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'}); });

Примечание: я предполагаю, что у вас есть только один из них на странице. Если нет, то вам нужно выяснить, как ссылаться на конкретный модал, который относится к рассматриваемой ссылке.

...