Open mask2012 opened 5 years ago
当文字展示不下去时,我期望点击查看更多,然后再次点击关闭。 涉及到几个特性:
来看脚本
checkDetail: function (content) { if(content.length<30){return;} var checkDetailStyle = '<style> #checkDetailPop{position: fixed; z-index: 9999; left:50%; top:50%; transform:translate(-50%,-50%); width: 80%; background-color: rgba(0,0,0,0.7); overflow: auto; color: #fff; font-size: 14px; word-break:break-all; padding: 15px; line-height:1.4; border-radius: 5px; font-family: "Microsoft Yahei",SimHei,"Helvetica Neue","DejaVu Sans",Tahoma; }#checkDetailPop p{max-height:70%; max-height:70vh; overflow:auto;-webkit-overflow-scrolling:touch;}</style>'; function isJson(obj) { var isjson = typeof (obj) == "object" && Object.prototype.toString.call(obj).toLowerCase() == "[object object]" && !obj.length; return isjson; } //创建dom结构和样式 if ($('#checkDetailPop').length == 0) { $('body').append('<div id="checkDetailPop"></div>'); $('body').append(checkDetailStyle); } //填入数据 $('#checkDetailPop').html(''); $('#checkDetailPop').prepend('<p>' + content + '</p>').removeClass('none').one('tap',function(){ $(this).addClass('none'); }); $('#checkDetailPop p').html(content); },
把样式也都写在一起了,比较紧凑,在结构上,我把内容写在了p这个标签里,给p设了最大高度,然后overflow:auto就可以出现滚动条了。然后外层写上padding,这样保证内容始终在框的内部,否则文字滚动时会贴边很不好看。事件处理上,为了避免多次绑定,用了one这样的绑定方式。
先来看效果
当文字展示不下去时,我期望点击查看更多,然后再次点击关闭。 涉及到几个特性:
来看脚本
把样式也都写在一起了,比较紧凑,在结构上,我把内容写在了p这个标签里,给p设了最大高度,然后overflow:auto就可以出现滚动条了。然后外层写上padding,这样保证内容始终在框的内部,否则文字滚动时会贴边很不好看。事件处理上,为了避免多次绑定,用了one这样的绑定方式。