页面选中文字弹出层，点击层中文字或者图片触发事件

其实这个功能十分简单，好多种实现方式，现在摘录两种实现方法：一种是使用原生js实现，一种是使用jquery实现。在实际项目中是使用kissy实现的，不过方法都差不多。本文参考了网上部分资料，如有侵权请多多原谅。

第一种使用原生js的方式：思路大体是首先将一个图片元素进行隐藏，然后获得选中文字事件，最后当鼠标位于选中文字上方时显示图片或者特定文字提示，点击提示就触发事件。

var hideImage = document.getElementById("hideImage");

var $selectFx = function(hideImage, eleContainer) {
	eleContainer = eleContainer || document;
	var getSelectTxt = function() {
		var txt = "";
		if(document.selection) {
			txt = document.selection.createRange().text;	// IE
		} else {
			txt = document.getSelection();
		}
		return txt.toString();
	};
	eleContainer.onmouseup = function(e) {
		e = e || window.event;
		var txt = getSelectTxt(), sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
		var left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX - 40, top = (e.clientY - 40 < 0) ? e.clientY + sh + 20 : e.clientY + sh - 40;
		if (txt) {
			hideImage.style.display = "inline";
			hideImage.style.left = left + "px";
			hideImage.style.top = top + "px";
		} else {
			hideImage.style.display = "none";
		}
	};
	hideImage.onclick = function() {
		var txt = getSelectTxt();
		alert(txt);//此处你可以添加你想要的实现
	};
}(hideImage);

第二种是使用jquery实现的，思路基本一致，实现难度也差不多，使用jquery实现优雅一些

$(function () {
	$("#content").mouseup(function (e) {
		var x = 10;
		var y = 10;
		var text = "";
		if (document.selection) {
			text = document.selection.createRange().text;
		}
		else if (window.getSelection()) {
			text = window.getSelection();
		}
		if (text!= "") {
			var tip = "有能耐你点我一下啊";
			var tooltip = "<div id='tooltip' class='tooltip'><a onclick=doit('"+r+"')>" + tip + "</a></div>";
			$("body").append(tooltip);
			$("#tooltip").css({
				"top": (e.pageY + y) + "px",
				"left": (e.pageX + x) + "px",
				"position": "absolute"
			}).show("fast");
		}
	}).mousedown(function () {
		$("#tooltip").remove();
	});
})

function doit(text) {
	if (text != "") {
		alert(text);//此处你可以添加你想要的实现
	}
}