选取网页内容后弹出提示框，类似于微博的快捷转发功能。

最新推荐文章于 2024-08-13 11:12:51 发布

diaocu2781

最新推荐文章于 2024-08-13 11:12:51 发布

阅读量147

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/nozer/archive/2012/05/30/2527120.html

版权

最近有个小需求，要做一个类似与微博快捷转发的功能。没办法，虽然JS不怎么样，但是也得去实现。就下面这几行代码，花了我接近三个小时时间，唉，框架用多了要不得啊，现在离了Jquery就被兼容性搞的头大如斗。

下面上代码，代码略丑大家不要见笑。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />

    <script type="text/javascript">
                var sy = (function() {
            return {
                get: function(selecter) {
                    if (!selecter) return null;

                    if (selecter.indexOf('#') === 0) return document.getElementById(selecter.substr(1, selecter.length));

                    if (selecter.indexOf('.') === 0) {
                        var className = selecter.substr(1, selecter.length);
                        if (document.getElementsByClassName) {
                            return document.getElementsByClassName(className);
                        }
                        else {
                            var 
                            elements = [],
                            resultsEl = [];

                            if (document.all) elements = document.all;
                            else elements = document.getElementByTagName('*');

                            for (var i = 0; i < el.length; i++) {
                                if (el[i].getAttribute('class') === className) {
                                    resultsEl.push(el[i]);
                                }
                            }

                            return resultsEl;
                        }
                    }

                    return document.getElementsByTagName(selecter);
                },
                bind: function(el, eventName, action) {
                    if (document.addEventListener) {
                        el.addEventListener(eventName, action, false);
                    }
                    else {
                        el.attachEvent('on' + eventName, action);
                    }
                },
                getMousePosition: function(e) {
                    if (e.pageX || e.pageY) {
                        return { left: e.pageX, top: e.pageY };
                    }

                    return {
                        left: e.clientX + document.documentElement.scrollLeft,
                        top: e.clientY + document.documentElement.scrollTop
                    };
                },
                getSelectedText: function() {
                    if (window.getSelection) {
                        return window.getSelection().toString();
                    }
                    else if (document.getSelection) {
                        return document.getSelection();
                    }
                    else if (document.selection) {
                        return document.selection.createRange().text;
                    }
                },
                popup: function(opt) {
                    opt = opt || {};
                    if (!opt.el) return;
                    else if (typeof opt.el == 'string') opt.el = sy.get(opt.el);

                    opt.left = opt.left || Math.ceil((document.body.clientWidth - opt.el.clientWidth) / 2);
                    opt.top = opt.top || Math.ceil((document.body.clientHeight - opt.el.clientHeight) / 2);

                    document.body.appendChild(opt.el);
                    opt.el.style.position = 'absolute';
                    opt.el.style.left = opt.left + 'px';
                    opt.el.style.top = opt.top + 'px';
                    opt.el.style.border = 'solid 5px #efefef';
                    opt.el.style.borderRadius = '3px';
                    opt.el.style.backgroundColor = '#ffffff';
                    opt.el.style.padding = '5px';
                    opt.el.style.zindex = 10000;
                    opt.el.style.display = 'inline-block';
                    opt.el.setAttribute('isClose', '0');
                }
            };
        } ());

        window.onload = function() {
            var el = sy.get('#popup');
            document.onclick = function(e) {
                e = e || window.event;
                var selectStr = sy.getSelectedText();
                if (selectStr.length > 10) {

                    var position = sy.getMousePosition(e);
                    
                    var param = {
                        el: el,
                        left: position.left - 200,
                        top: position.top - 50
                    };

                    sy.popup(param);
                }
            }

            el.onclick = function(e) {
                e = e || window.event;
                if (document.all) {
                    e.cancelBubble = true;
                }
                else {
                    e.stopPropagation();
                }
            }

            sy.bind(document, 'click', function(e) {
                if (el.getAttribute('isClose') === '0') {
                    el.setAttribute('isClose', '1');
                    return;
                }
                el.style.display = 'none';
            });
        }
    </script>

</head>
<body>
    <div style="width:600px; margin:0 auto;">
        <div id='popup' style="display:none; width:300px;">上联：为需求而生，为用户而死，为浏览器奋斗一辈子！<br/>下联：吃C S S 亏，上 J S 的当，最后死在兼容上！<br/><center>横批：前端人生</center></div>
        <span>        <!-- sphereit start -->
    <p><a class="asset-img-link" style="display: inline;">JOHANNESBURG, South Africa -- Former Liberian President Charles Taylor will likely spend the rest of his life in jail after a U.N.-backed court sentenced him to 50 years in prison for aiding and abetting war crimes.</p>
<p>Taylor , 64, is the first former head of state to be convicted by an international court for war crimes since the Nuremberg trials of Nazi leaders that followed World War II.</p>
<p>He was convicted of helping plan war crimes with Revolutionary United Front rebels in Sierra Leone, trading arms with them in return for so-called blood diamonds. During their 1991-2002 reign of terror, the rebels were known for amputating limbs, raping women and girls, recruiting and using child soldiers and forcing girls and women to become sex slaves.</p>
<p>Taylor was convicted last month on 11 counts, including terrorism, murder, rape, sexual slavery, outrages on personal dignity, conscripting child soldiers, enslavement and pillage. He will serve his&nbsp; sentence in Britain.</p>

        <!-- sphereit end --></span>
    </div>
</body>
</html>

或者点击这里下载：点击下载

转载于:https://www.cnblogs.com/nozer/archive/2012/05/30/2527120.html

diaocu2781

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选取网页内容后弹出提示框，类似于微博的快捷转发功能。

最近有个小需求，要做一个类似与微博快捷转发的功能。没办法，虽然JS不怎么样，但是也得去实现。就下面这几行代码，花了我接近三个小时时间，唉，框架用多了要不得啊，现在离了Jquery就被兼容性搞的头大如斗。下面上代码，代码略丑大家不要见笑。<!DOCTYPE html><html><head> <meta http...
复制链接

扫一扫