单击“阅读更多”时，使Javascript弹出窗口工作

我发现了这个很好的POPUP窗口代码，它工作得很顺利。在Stackoverflow的帮助下，我能够组合一些代码来截断长字符串，这样单词就不会在在中间断开。这两段代码都很好用。

当我触发包含ID="showshort"的"a"锚的"p"元素来调用字符串限制代码时，该代码可以很好地显示缩短的字符串，但单击"阅读更多"时不再触发弹出窗口。如果我不触发ID="showshort"的字符串限制代码，弹出窗口效果很好。

脚本：

 <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"元素的ID被故意拼错了。通过这种方式，弹出窗口可以完美工作。更改ID以正确拼写"showshort"来调用字符串缩短代码，缩短代码可以完美地返回缩短后的字符串，并具有与上面正文中显示的完全相同的"p"内部代码，但当我单击"阅读更多…"时，什么也没发生——没有弹出窗口。

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

在您的JavaScript中，我认为您有两个$（document）.ready（$（function）是我认为的快捷方式）。由于$（document）.ready在您的$（函数）之前，所以$（document）.ready首先运行。

基本上，您可以在$（document）.ready中为a元素设置onclick事件处理程序，然后在$（function）中，覆盖showshort的整个内容，用一个缺少onclick活动处理程序的新元素替换a元素。

也许，当您想要附加文本时，应该使用元素的insertBefore方法，这样它现有的子元素就不会被覆盖。

编辑：请参阅评论中的fiddle。

相关内容

最新更新

热门标签：