Fatal编程技术网
  • javascript/
  • 单击“阅读更多”时让Javascript弹出窗口正常工作

单击“阅读更多”时让Javascript弹出窗口正常工作

javascript html

单击“阅读更多”时让Javascript弹出窗口正常工作,javascript,html,popup,Javascript,Html,Popup,我发现这个很好的弹出窗口代码，工作非常顺利。在StAcExoPro的帮助下，我能够将一些代码放在一起切断长字符串，这样中间的单词就不会被破坏。这两段代码都非常有效 当我触发包含一个ID为=“showshort”的“a”锚的“p”元素来调用字符串限制代码时，该代码可以很好地显示缩短的字符串，但当单击“阅读更多”时，弹出窗口不再触发。如果我没有使用ID=“showshort”触发字符串限制代码，弹出窗口将非常有效 剧本： <script language="javascript">

我发现这个很好的弹出窗口代码，工作非常顺利。在StAcExoPro的帮助下，我能够将一些代码放在一起切断长字符串，这样中间的单词就不会被破坏。这两段代码都非常有效

当我触发包含一个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>


/*弹出框代码*/
$（文档）.ready（函数（）{
$（'a.popup'）。单击（函数（）{
var popupid=$（this.attr（'rel'）；
$（'#'+popupid）.fadeIn（）；
$（'body'）。追加（''）；
$（'#fade'）.css（{'filter'：'alpha（不透明度=60）}）.fadeIn（）；
var popuppmargin=（$（'#'+popupid）.height（）+10）/2；
var popupleftmargin=（$（'#'+popupid）.width（）+10）/2；
$（'#'+popupid）.css({
“页边空白处”：Popuptpmargin，
“左边距”：-popupleftmargin
});
});
$（'#淡入'）。单击（函数（）{
$（“#淡入，#波普雷尔，#波普雷尔2，#波普雷尔3'）。淡出（）
返回false；
});
});
/*智能缩短文本的代码*/
$（函数（）{
var$elem=$（'.shorten'）；//包含要隐藏的文本的一个或多个元素
var$limit=100；//要显示的字符数
var$str=$elem.html（）；//获取文本
var$strtemp=$str.substr（0，$limit）；//获取字符串的可见部分
var$str=$strtemp.substr（0，Math.min（$strtemp.length，$strtemp.lastIndexOf（“”））
$str=$str+''；
document.getElementById（'showshort'）。innerHTML=$str；
})
风格

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


/*弹出框js所必需的*/
#触发{
文本对齐：居中；
} 
/*弹出框js所必需的*/
#褪色{
显示：无；/*默认情况下隐藏*/
背景：#000；
位置：固定；
左：0；上：0；
宽度：100%；高度：100%；
不透明度：.60；
z指数：9999；
}
/*影响关闭“X”在弹出框上的位置*/
closeX先生{
位置：绝对位置；
左：95%；
最高：2%；
} 
Popupox先生{
宽度：633px；
高度：300px；
溢出：自动；
背景色：#FFF0；
背景重复：无重复；
显示：无；/*默认隐藏*/
浮动：左；
边界半径：10px；
位置：固定；
顶部：50%；左侧：50%；
z指数：99999；
-网络工具包盒阴影：0px 0px 20px#000；
-moz盒阴影：0px 0px 20px#000；
盒影：0px 0px 20px#000；
z指数：999999；
}
还有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”完全相同，但当我单击“阅读更多…”时，不会发生任何事情--不会弹出窗口

在JavaScript中，我认为您有两个$（文档）。ready（$（函数）是一个快捷方式，我相信）。由于$（document）.ready位于$（函数）之前，$（document）.ready首先运行

基本上，在$（document）中为a元素设置onclick事件处理程序。ready，然后在$（函数）中覆盖showshort的整个内容，这将用缺少onclick事件处理程序的新元素替换a元素

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

编辑：请在评论中查看fiddle。

请放上一个工作的JSFIDLE演示和一个非工作的演示，这将使您更容易理解好的，我已经放在“JSFIDLE”上了。按原样运行它，您将看到DIV中没有缩短的文本，因为ID=“showshort”是故意拼写错误的，所以第一个元素中没有任何内容是错误的。只有单词“Some…”出现，如果你点击“阅读更多”，你会看到弹出的工作。现在更改ID=“showshort”以使其拼写正确，从而将元素中的文本替换为DIV中的缩短字符串，然后再次运行它。这次您将看到DIV中缩短的字符串，但是“readmore”不再激活弹出窗口。我想我听懂了你说的话，听起来是对的。但是，我没有足够的知识来使用“insertBefore”方法。我刚刚阅读了它，示例显示了如何在内部元素之前插入另一个元素，但我不确定如何使用它来替换元素的文本，这样就不会干扰包含clicbable事件的锚。examaple会很有帮助的。既然你给了我这个线索，我尝试了三种不同的方法来替换字符串，同时保留click事件，但都不起作用。我尝试了这两种方法：var$e=$（“#showshort”）$e、 html（$e.html（）.replace（“Some…”，Other”）；实际上，在更仔细地查看代码之后，我认为您不需要附加任何文本（除非我误解了某些内容）。下面是对您的代码的修改和注释：我更新了该修改以使关闭按钮正常工作：也许您应该查看jQueryUI的对话框小部件。这可能比从头开始创建弹出对话框容易得多。