Skrypt wyświetlający okienko na stronie

Question

Witam

chciałbym napisać skrypt który po prostu wyświetli okienko na danej stronie. Ogólnie ma to być tylko zwykłe okienko, ale żeby się pojawiało jak skrypt jest aktywny. Skrypty piszę w Tamper Monkey'u bo ułatwia łatwe zarządzanie skryptami w internecie. 

Wystarczy przykładowo taki kwadracik http://prntscr.com/xgqn4c . Nie musi on byc tak rozbudowany tylko jednolity z resztą wydaje mi się że poradzę tylko że nie chce mi się pojawić nawet zwykły kwadrat.

 

 

(function() {
   

  let Q = `
            #box
            {
               position: absolute;
               height:200px;
               width:200px;

               border: 2px solid red;
              padding: 5px;
              text-align: center;
               background: blue;
               left:100px;
               top:100px;
               cursor: grab;



               z-index: 390;
             }

        `;
   let P = document.createElement(`style`);
   P.appendChild(document.createTextNode(Q));
    this.initHTML();


})();

Ogólnie napisałem coś takiego nie wiem czy to ma prawo działać ale dopiero zaczynam zabawę ze skryptami w JavaScript.

Answer 1

Dobra po dopisaniu paru rzeczy udało mi się osiągnąć zamierzony efekt.

Wrzucam jak by ktoś kiedyś miał podobny problem

(function() {
   

  let Q = `
            #box997
            {
               position: absolute;
               height:200px;
               width:200px;

               border: 2px solid red;
              padding: 5px;
              text-align: center;
               background: blue;
               left:100px;
               top:100px;
               cursor: grab;



               z-index: 390222;
             }

        `;



        let O = document.createElement(`select`)


        L = document.createElement(`div`);
        L.id = `box997`, L.setAttribute(`tip`, `Złap i przenieś :)`);
        L.appendChild(O), document.body.appendChild(L);


   let P = document.createElement(`style`);
     P.type = `text/css`;
   P.appendChild(document.createTextNode(Q)), document.head.appendChild(P);



})();

 

Comments

a nie lepiej stworzyć klasę w css z tym stylami i po prostu dynamicznie stworzyć element w drzewie DOM w normalny sposób w pureJS? Nie widzę kompletnie uzasadnienia dla wrzucania libki do takiej rzeczy i do tego w tak udziwniony sposób...

---

Ogólnie piszę coś takiego pierwszy raz i wzoru się na kodach które znalazłem w internecie ale generalnie nie są to typowe same okienka ale spore rozbudowane kody i na bazie kodu udało mi sie ustalić tyle co mam.

Gdybym umiał napisac w taki sposób jak ty mówisz z pewnością bym to zrobił ale niestety nawet nie mam pojęcia o czym piszesz. Teraz już wiem że coś takiego istnieje i zapewne zaraz sobie wygogluje i cos się zacznę w tym kierunku edukować, jeśli masz jeszcze jakieś sugestie jak można to zrobić lepiej itp to zamieniam się w słuch bo jestem początkujący i totalnie zielony

---

To sugeruję zacząć od nauki podstaw js na spokojnie, serio, nie idź w biblioteki jak nie znasz języka bo szybko sie zniechecisz. Sam to przerabialem na poczatku nauki i wiem po sobie że to była zła droga :) małymi kroczkami od podstaw a zobaczysz że szybko bedziesz umiał napisać cos takiego w czystym js.

---

@persikk, a może taki efekt Ciebie zainteresuje  tzw. Modal Box  [ 1 ]  [ 2 ]