选中文本弹出对话框效果（如百度文库）

实现效果：

     1.按住鼠标选中文本松开时弹出对话框（onmouseup事件）2.点击对话框外的内容时，对话框隐藏。3.点击选中的内容对话框也隐藏

实现步骤:

     1.给文本内容外的盒子注册一个onmouseup事件（鼠标松开时）2.判断是否选中内容，如果只点击没选中不弹出，如果选中文本内容则弹出对话框3.再给整个页面注册onmousedown事件（鼠标按下时发生），4.如果选中点击的的id不是对话框，则隐藏对话框。5.取消选中内容，（如果点击的选中内容则一直弹出）

实现细节：

 1.window.getSelection()返回一个选中的对象，表示用户选择的文本范围或插入符的当前位置，document.selection.createRange() 这个属性只在 IE10 以前版本被支持，(其实还有一个 document.getSelection() 虽然还能用但已经被标记成要废弃的方法了) 在非IE浏览器（Firefox、Safari、Chrome、Opera）下可以使用window.getSelection()获得selection对象，2..js中事件是会冒泡的，所以this是可以变化的event.target不会变化，它永远指向触发事件的DOM元素本身。3.event.target和event.srcElement都指事件源，event.srcElement是IE浏览器中的， 而event.target是大多数浏览器中的。因此要兼容性写法4. window.getSelection().removeAllRanges() ， document.selection.empty()，都是取消选中内容

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>选中文本弹出对话框</title><style>.tool{cursor: pointer;display: none;background-color: white;color: blue;position: absolute;left: 0px;top: 0px;}</style><script>function $(id){return document.getElementById(id);}window.onload = function (){$('art').onmouseup = function(event){ //onmouseup松开鼠标按钮时执行var event = event || window.event;var x = event.clientX - $('wenku').offsetLeft;var y = event.clientY - $('wenku').offsetTop;var txt; //getSelection()方法可以返回一个Selection对象，用于表示用户选择的文本范围或插入符的当前位置。txt = window.getSelection ? window.getSelection().toString() : document.selection.creatRange().text;if(txt){ $('toolDiv').style.display = "block";$('toolDiv').style.left = x + 'px';$('toolDiv').style.top = y + 'px';}}//点击其他地方让盒子消失不能用onclickdocument.onmousedown = function (event){ //鼠标按下时发生var event = event || window.event;var id = event.target ? event.target.id : event.srcElement.id; //if(id !="toolDiv"){$('toolDiv').style.display = 'none';}//取消选中内容window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();}}</script>
</head>
<body><div class="wenku" id="wenku"><div class="art" id="art">黄初三年，余朝京师，还济洛川。古人有言，斯水之神，名曰宓妃。感宋玉对楚王神女之事，遂作斯赋。其辞曰：
余从京域，言归东藩。背伊阙，越轘辕，经通谷，陵景山。日既西倾，车殆马烦。尔乃税驾乎蘅皋，秣驷乎芝田，容与乎阳林，流眄乎洛川。于是精移神骇，忽焉思散。俯则未察，仰以殊观，睹一丽人，于岩之畔。乃援御者而告之曰：“尔有觌于彼者乎？彼何人斯？若此之艳也！”御者对曰：“臣闻河洛之神，名曰宓妃。然则君王所见，无乃是乎？其状若何？臣愿闻之。”
余告之曰：“其形也，翩若惊鸿，婉若游龙。荣曜秋菊，华茂春松。髣髴兮若轻云之蔽月，飘飖兮若流风之回雪。远而望之，皎若太阳升朝霞；迫而察之，灼若芙蕖出渌波。秾纤得衷，修短合度。肩若削成，腰如约素。延颈秀项，皓质呈露。芳泽无加，铅华弗御。云髻峨峨，修眉联娟。丹唇外朗，皓齿内鲜，明眸善睐，靥辅承权。瑰姿艳逸，仪静体闲。柔情绰态，媚于语言。奇服旷世，骨像应图。披罗衣之璀粲兮，珥瑶碧之华琚。戴金翠之首饰，缀明珠以耀躯。践远游之文履，曳雾绡之轻裾。微幽兰之芳蔼兮，步踟蹰于山隅。
于是忽焉纵体，以遨以嬉。左倚采旄，右荫桂旗。壤皓腕于神浒兮，采湍濑之玄芝。余情悦其淑美兮，心振荡而不怡。无良媒以接欢兮，托微波而通辞。愿诚素之先达，解玉佩以要之。嗟佳人之信修，羌习礼而明诗。抗琼珶以和予兮，指潜渊而为期。执眷眷之款实兮，惧斯灵之我欺。感交甫之弃言兮，怅犹豫而狐疑。收和颜而静志兮，申礼防以自持。
于是洛灵感焉，徙倚彷徨，神光离合，乍阴乍阳。竦轻躯以鹤立，若将飞而未翔。践椒涂之郁烈，步蘅薄而流芳。超长吟以永慕兮，声哀厉而弥长。
尔乃众灵杂沓，命俦啸侣，或戏清流，或翔神渚，或采明珠，或拾翠羽。从南湘之二妃，携汉滨之游女。叹匏瓜之无匹兮，咏牵牛之独处。扬轻袿之猗靡兮，翳修袖以延伫。体迅飞凫，飘忽若神，凌波微步，罗袜生尘。动无常则，若危若安。进止难期，若往若还。转眄流精，光润玉颜。含辞未吐，气若幽兰。华容婀娜，令我忘餐。
于是屏翳收风，川后静波。冯夷鸣鼓，女娲清歌。腾文鱼以警乘，鸣玉鸾以偕逝。六龙俨其齐首，载云车之容裔，鲸鲵踊而夹毂，水禽翔而为卫。
于是越北沚。过南冈，纡素领，回清阳，动朱唇以徐言，陈交接之大纲。恨人神之道殊兮，怨盛年之莫当。抗罗袂以掩涕兮，泪流襟之浪浪。悼良会之永绝兮，哀一逝而异乡。无微情以效爱兮，献江南之明珰。虽潜处于太阴，长寄心于君王。忽不悟其所舍，怅神宵而蔽光。
于是背下陵高，足往神留，遗情想像，顾望怀愁。冀灵体之复形，御轻舟而上溯。浮长川而忘返，思绵绵而增慕。夜耿耿而不寐，沾繁霜而至曙。命仆夫而就驾，吾将归乎东路。揽騑辔以抗策，怅盘桓而不能去。</div><div class="tool" id="toolDiv"><span>【搜索】</span><span>【复制】</span><span>【共享】</span></div></div>
</body>
</html>

选中文本弹出对话框效果（如百度文库）相关推荐

android+底部评论框,Android 之BottomsheetDialogFragment仿抖音评论底部弹出对话框效果(实例代码)...
实现的效果图: 自定义Fragment继承BottomSheetDialogFragment 重写它的三个方法: onCreateDialog() onCreateView() onStart() 他 ...
原生js实现如下效果：一个按钮，点击它会弹出对话框，但5秒内再点击不会再弹出对话框。5秒后恢复正常。
原生js实现如下效果: 一个按钮,点击它会弹出对话框,但5秒内再点击不会再弹出对话框.5秒后恢复正常. 第一种方式: 使用函数节流的方式(就是设置一个变量,来一个判断语句,判断这个变量的值.为真或假执 ...
百度Ueditor 富文本弹出层，如何保证点击空白处不关闭
百度Ueditor 富文本弹出层,如何保证点击空白处不关闭使用百度富文本上传图片.视频等资源时,在上传过程中如果点击了弹出层外的地方,弹出层自动关闭,上传就自动退出了,导致资源就上传失败.如何解决这 ...
ABAP 弹出对话框
一组有用的用户交互窗口函数显示多条消息 SAP系统用的是这个函数:C14Z_MESSAGES_SHOW_AS_POPUP POPUP_TO_CONFIRM_LOSS_OF_DATA 显示有YES/N ...
php 弹窗代码大全,PHP_asp.net弹出窗口代码大全，//关闭,父窗口弹出对话框,子窗 - phpStudy...
asp.net弹出窗口代码大全 //关闭,父窗口弹出对话框,子窗口直接关闭 this.Response.Write(""); //关闭,父窗口和子窗口都不弹出对话框,直接关闭 th ...
flavr—超级漂亮的jQuery扁平弹出对话框
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 插件描述:flavr是一个时尚的扁平弹出对话框为您的下一个网站. flavr是响应设计布局,能够适应 ...
Web开发中的弹出对话框控件介绍
Web开发中,目前由于Jquery的大行其道,因此很多弹出对话框,都用到了Jquery技术,反而原始的弹出对话框的方式较为少用了.不过基于JQuery的方式实现对话框窗口弹出,也有很多控件可以利用,由 ...
mac关闭渐隐和弹出动画效果
苹果系统应用程序的窗口和对话框每次使用的时候都有华丽的特效,但是如果你感觉这种特效显得有点慢(MacGG闲的蛋疼),那该如何取消掉他呢?方法很简单,打开"终端"(Finder-&g ...
Jquery 弹出对话框插件xcConfirm.js
Jquery 弹出对话框插件xcConfirm.js,感觉很方便使用,使用方法如下: <!DOCTYPE html> <html><head><meta ch ...
九种js弹出对话框的方法
[1.最基本的js弹出对话框窗口代码] 这是最基本的js弹出对话框,其实代码就几句非常简单: 复制代码代码如下: <script LANGUAGE="javascript"& ...

选中文本弹出对话框效果（如百度文库）

实现效果：

实现步骤:

实现细节：

代码：

选中文本弹出对话框效果（如百度文库）相关推荐

最新文章

热门文章