Получение окна Javascript POPUP для работы при нажатии на ЧИТАТЬ БОЛЬШЕ

0

Я нашел этот хороший код окна POPUP, который работает очень гладко. С помощью Stackoverflow я смог собрать код для отсечки длинных строк, поэтому слова не разбиты посередине. Оба фрагмента кода работают отлично.

Когда я запускаю элемент "p", который заключает якорь "a" с идентификатором "showhort", чтобы вызвать строковый ограничивающий код, код работает нормально, показывая сокращенную строку, но всплывающее окно больше не запускается при нажатии "Читать дальше" ". Если я не запускаю строковый ограничивающий код с ID = "showhort", всплывающее окно отлично работает.

Сценарий:

 <script language="javascript">
  /* popup box code */
  $(document).ready(function() {
  $('a.popup').click(function() {
  var popupid = $(this).attr('rel');
  $('#' + popupid).fadeIn();
  $('body').append('<div id="fade"></div>');
  $('#fade').css({'filter' : 'alpha(opacity=60)'}).fadeIn();

  var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
  var popupleftmargin = ($('#' + popupid).width() + 10) / 2;
  $('#' + popupid).css({
  'margin-top' : -popuptopmargin,
  'margin-left' : -popupleftmargin
  });
  });
  $('#fade').click(function() {
  $('#fade , #popuprel , #popuprel2 , #popuprel3').fadeOut()
  return false;
  });
  });

  /* code to shorten text intelligently */
    $(function(){
        var $elem = $('.shorten');      // The element or elements with the text to hide
        var $limit = 100;       // The number of characters to show
        var $str = $elem.html();    // Getting the text
        var $strtemp = $str.substr(0,$limit);   // Get the visible part of the string
            var $str = $strtemp.substr(0, Math.min($strtemp.length, $strtemp.lastIndexOf(" ")))
            $str = $str + '<a href="#" rel="popuprel" class="popup"><br><br>Read more...</a>';
    document.getElementById('showshort').innerHTML = $str;
    })
</script>

Стиль

<style>
/* necessary for popup box js*/
#trigger {
text-align:center;
} 

/* necessary for popup box js */
#fade { 
display: none;  /* Hidden as default */ 
background: #000;
position: fixed;
left: 0; top: 0;
width: 100%; height: 100%;
opacity: .60;
z-index: 9999;
}
/* affects placement of closing "X" on popup box*/
.closeX {
position:absolute;
left: 95%;
top: 2%;
} 
.popupbox {
width:633px;
height:300px;
overflow: auto;
background-color:#FFF0F0;
background-repeat:no-repeat;
display: none; /* Hidden as default */
float: left;
border-radius: 10px;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
z-index:999999;
}
</style>

и HTML

<body>
<p id="showshor">Some short text...<a href="#" rel="popuprel" class="popup"><br><br>Read more...</a></p>

<div class="popupbox shorten" id="popuprel">
<p>This is text inside popup.This is text inside popup.This is text inside popup.
This is text inside popup.This is text inside popup.This is text inside popup.
This is text inside popup.This is text inside popup.This is text inside popup.
This is text inside popup.This is text inside popup.This is text inside popup.
This is text inside popup.This is text inside popup.This is text inside popup.</p> 
<!-- Closing "X" -->
<a class="closeX" href="javascript:window.location.href='#'"><img src="close_pop.png" width="20px" height="20px"/></a>
</div> <!-- popupbox -->
</body>
</html>

В настоящее время идентификатор элемента "p" специально написан неправильно. Таким образом всплывающее окно работает отлично. Измените идентификатор, чтобы правильно называть "showhort", чтобы вызвать код сокращения строки, и код сокращения работает отлично, возвращая сокращенную строку с таким же внутренним кодом "p", показанным выше в теле, но когда я нажимаю "Подробнее.... "ничего не происходит - нет всплывающих окон.

http://jsfiddle.net/32sAB/1/

  • 0
    пожалуйста, наденьте рабочую демонстрацию jsfiddle и нерабочую демонстрацию, которая облегчит вам понимание
  • 0
    Хорошо, я положил его на «jsfiddle». Запустите его как есть, и вы увидите, что сокращенного текста из DIV нет, потому что ID = «showhort» намеренно написан с ошибкой, поэтому ничего внутри первого элемента <p> не нарушается. Появляется только слово «Некоторые…», и, если вы нажмете «Читать дальше», вы увидите всплывающее окно. Теперь измените ID = ”showshort”, чтобы он был написан правильно, чтобы текст в элементе <p> был заменен сокращенной строкой из DIV, и запустите ее снова. На этот раз вы увидите укороченную строку из DIV, но «Читать дальше» больше не активирует всплывающее окно.
Теги:
popup

1 ответ

0
Лучший ответ

В вашем JavaScript, я думаю, у вас есть два $ (document).ready($ (function) - ярлык, который я считаю). Поскольку $ (document).ready перед вашей $ (функцией), $ (document).ready запускается первым.

В принципе, вы устанавливаете обработчик события onclick для элемента в $ (document).ready, затем в $ (function) вы переписываете весь контент showhort, который заменяет элемент новым, у которого отсутствует обработчик события onclick,

Возможно, когда вы хотите добавить текст, вы должны использовать элемент insertBefore, чтобы его существующие дочерние элементы не перезаписывались.

Изменение: см. Скрипку в комментарии.

Поделиться
  • 0
    Я новичок в Javascript. Я думаю, что следую тому, что вы говорите, и это звучит правильно. Тем не менее, я недостаточно осведомлен, чтобы использовать метод "insertBefore". Я просто прочитал об этом, и примеры показывают, как вставить другой элемент перед внутренним элементом, но я не уверен, как его использовать, просто чтобы заменить текст для элемента <p>, чтобы не мешать <a > якорь, который содержит кликабельное событие. Пример будет полезен.
  • 0
    Так как вы дали мне эту подсказку, я попробовал три разных способа заменить строку, сохранив событие click, и ни один из них не сработал. Я пробовал эти два: var $ e = $ ('# showshort'); $ e.html ($ e.html (). replace ("Некоторые ...", "Другие"));
Показать ещё 9 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню