Hello. Immediately please if you answer the question - DO NOT OFFER JQUERY and do not ask why or what does not suit it. I am writing an extension for Google Chrome, where there will be a function that causes a pop-up window (for example, how it is done using JQuery UI) on a predetermined page of the site, I want to do it in pure JS. It is necessary that it be modal, and it can be dragged behind the title and you can add and customize elements, buttons, etc. on pure JS (for example appendChild). The problem is that all the examples turned out to be incapable: during the injection only the text somewhere at the top or bottom of the page is displayed. On a blank page, everything is displayed without problems, on a page with an existing design problem. Jquery UI displays without problems, but in this matter religion does not allow the use of this library. Can someone suggest a ready-made sample script for outputting a modal window on JS + CSS / CSS3 + HTML / HTML5, which could "overlap" all the elements on the page and would be displayed as well as on the JQUERY UI without using this. Thank you in advance!

  • 2
    @slavutich, According to the rules of the forum, questions should not be limited to solving or completing student assignments. Please clarify what you have done yourself and what did not work out. here is not a forum for me! here is * TK ! * - zb '
  • I counted on the response of people who encountered this when developing chrome extensions, for example: in css you need to add something so that your window is on top of the entire page, or in jquery ui you use this or that css parameter, or a link where similar windows are similar to jquery ui already created, but without jquery. for the first time I hear students solve assignments for writing extensions, well, if so necessary: ​​document.getElementsByTagName ('body') [0] .innerHTML + = '<div id = "modWindow"> ... </ div>', and which The css parameters should be, all the examples that gave Google did not fit, showed only with jquery ui. - Vitaly Pozdnyakov
  • Well, what's your problem? See how this is done in jquery-ui or bootstrap, do the same without jquery. And just like that without writing ui with windows is some kind of masochism. in general, all window pulling is based on the interception of a mousemove event between mousedown and mouseup. - zb '
  • The problem was that time wasted for the preparation of the question. Well, dragging the windows is not so masochism, in this case there is no need for cross-browser compatibility. I needed a hint with a focus on css, everywhere I focused on it, no one suggested unfortunately (it turned out to be z-index), but to dig jquery-ui, really valuable advice. Probably the next time I’ll write the questions right away: “tell me, I want to do it like in jquery, but without it, I can look in jquery for how it is done? I need expert advice, otherwise I’m not a beginner who can watch the code from there, suddenly someone here will be against "))) - Vitaly Pozdnyakov

2 answers 2

Look, I specifically wrote an article a long time ago about modal windows: http://lampacore.ru/2013/02/18/drag-and-drop-html-javascript/

Then you can operate with it as you please) You just need to replace event handlers and getting offset () with native, i.e.

elem.offsetTop; elem.offsetLeft; obj.addEventListener("mousedown/mouseup/mousemove", you_function, false);
  • ATP, great, the only example does not work in chrome under Linux, swears at $, and even more clarity on this issue - Vitaly Pozdnyakov

I spread the source of what happened, if someone come in handy:

 окно_которое_надо_таскать.setAttribute("draggable", "true"); окно_которое_надо_таскать.onmousedown = function (e) { if (e.target.id == "id_заголовка_окна_за_который_нужно_таскать_родителя") { var self = this; e = fixEvent(e); var coords = getCoords(this); var shiftX = e.pageX - coords.left; var shiftY = e.pageY - coords.top; this.style.position = "absolute"; document.body.appendChild(this); moveAt(e); this.style.zIndex = 1001; function moveAt(e) { self.style.left = e.pageX - shiftX + "px"; self.style.top = e.pageY - shiftY + "px" } document.onmousemove = function (e) { e = fixEvent(e); moveAt(e) } this.onmouseup = function () { document.onmousemove = self.onmouseup = null } } } окно_которое_надо_таскать.ondragstart = function () { return false } function getCoords(elem) { var box = elem.getBoundingClientRect(); var body = document.body; var docEl = document.documentElement; var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop; var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft; var clientTop = docEl.clientTop || body.clientTop || 0; var clientLeft = docEl.clientLeft || body.clientLeft || 0; var top = box.top + scrollTop - clientTop; var left = box.left + scrollLeft - clientLeft; return { top: Math.round(top), left: Math.round(left) }; } function fixEvent(e) { e = e || window.event; if (!e.target) e.target = e.srcElement; if (e.pageX == null && e.clientX != null) { var html = document.documentElement; var body = document.body; e.pageX = e.clientX + (html.scrollLeft || body && body.scrollLeft || 0); e.pageX -= html.clientLeft || 0; e.pageY = e.clientY + (html.scrollTop || body && body.scrollTop || 0); e.pageY -= html.clientTop || 0 } if (!e.which && e.button) e.which = e.button & 1 ? 1 : e.button & 2 ? 3 : e.button & 4 ? 2 : 0; return e; }