In Google+, at the very bottom there is a button “Leave a review” , by clicking on which the screen is extinguished and you can select different blocks with the mouse, the review about which you want to write. I wanted to ask the principle of implementing such a functional using javascript or any js library. (Who does not have a Google+ account can send an invitation.)

    1 answer 1

    var comment_mode = false; $("*").live('click', function () { if (comment_mode) { openCommentForm(domPath($(this))); } }) function domPath(element) { var path = element.tagName + "." + element.className + "#" + element.attr('id'); if (element.parent()) { path = domPath(element.parent()) + '/' + path; } return path; }

    The openCommentForm function simply creates a div with dimensions of 100500px * 100500px, fills it with a semi-transparent PNG shk, and in it - an Iframe with a form. I think nothing complicated.

    Coordinate tracking: You can track
    You can clone the contents of the "BODY", with all dimensions, but without color,
    You can repaint each element (to create dark classes)
    You can make all the elements translucent (opacity), and then tint the background "body" in dark gray / black. Perhaps, this is the most amusing decision: nothing superfluous is created.

    PS code did not check. Think of it as pseudocode, not as a ready-made solution.

    • Interests the principle itself, when you drive with your mouse over a dark background and point to an element, this element is highlighted and shown from under the diva. How to implement this, because all the elements are under the diva, events are not hung on the element itself, are the mouse coordinates tracked and if they correspond to the coordinates of the block (which were previously entered), then this block is simply displayed from under the shading diva? - makregistr 2:26 pm
    • Updated the answer - knes