Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #28184

Re: How to do a popup box

Show all headers | View raw

Gregor Kofler <usenet@gregorkofler.com> writes:

> Am 2015-06-26 um 07:54 schrieb bit-naughty@hotmail.com:
>> Oh for God's sake - there's SEVEN replies, all filled with *this*
>> bullshit - if you don't want to help me, DON'T, don't go on and on
>> about it...?!!! This is NOT homework, but yes, it IS for a site I'm
>> making, and I can only tell you what I *thought* of - I don't *know*
>> what to code, if I knew, I wouldn't BE here....?
>>
>> The z-index for this "menu" has to be more than that of the page,
>> right.....? But I can't figure out how to code the "onclick"
>> stuff..... The menu has to be displayed where the mouse was clicked,
>> how do I do that?
>
> Depends. Most people use libraries for that. In plain JS/DOM you would
> calculate the position of the clicked element in your listener by
> summing up the offsetTop/offsetLeft properties of the element and all
> parent elements. Then position your menu absolutely at this
> coordinate, set an appropriate zIndex (or define a suitable z-index in
> your CSS). Voilà...

Is there are reason to avoid using the position of the mouse click as
contained in the event?  My sketch of the method would be:

<!DOCTYPE html>
<html>
  <head>
    <style>
     #area {
         background: yellow;
         width: 60%;
         height: 10em;
         margin-left: auto;
         margin-right: auto;
     }
     #menu {
         position: absolute;
         display: none;
         background: white;
         padding: 0.3em;
     }
    </style>
    <script type="text/javascript">
     window.addEventListener(
          'load',
          function () {
               var menu = document.getElementById('menu');
               document.getElementById('area').addEventListener(
                    'click',
                    function (evt) {
                         menu.style.display = 'block';
                         menu.style.top = evt.clientY + 'px';
                         menu.style.left = evt.clientX + 'px';
                    },
                    false);
               menu.addEventListener(
                    'click',
                    function (evt) {
                         this.style.display = 'none';
                         evt.stopPropagation();
                    },
                    false);
          },
          false);
    </script>
    <title>Menu</title>
  </head>
  <body>
    <div id=area><div id=menu style="">X</div></div>
  </body>
</html>

-- 
Ben.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

How to do a popup box bit-naughty@hotmail.com - 2015-06-25 12:18 -0700
  Re: How to do a popup box "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-06-25 21:29 +0200
    Re: How to do a popup box Scott Sauyet <scott.sauyet@gmail.com> - 2015-06-25 13:02 -0700
      Re: How to do a popup box "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-06-25 22:10 +0200
    Re: How to do a popup box "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-06-25 22:05 +0200
  Re: How to do a popup box Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-06-25 22:18 +0200
    Re: How to do a popup box "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-06-25 22:25 +0200
      Re: How to do a popup box bit-naughty@hotmail.com - 2015-06-25 22:55 -0700
        Re: How to do a popup box "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-06-26 09:14 +0200
  Re: How to do a popup box bit-naughty@hotmail.com - 2015-06-25 22:54 -0700
    Re: How to do a popup box Gregor Kofler <usenet@gregorkofler.com> - 2015-06-26 12:29 +0200
      Re: How to do a popup box Ben Bacarisse <ben.usenet@bsb.me.uk> - 2015-06-26 20:28 +0100
        Re: How to do a popup box bit-naughty@hotmail.com - 2015-07-02 11:14 -0700
          Re: How to do a popup box Ben Bacarisse <ben.usenet@bsb.me.uk> - 2015-07-02 20:13 +0100
            Re: How to do a popup box Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-07-05 10:48 +0200
          Re: How to do a popup box Tim Streater <timstreater@greenbee.net> - 2015-07-02 20:30 +0100
    Re: How to do a popup box Ben Bacarisse <ben.usenet@bsb.me.uk> - 2015-06-26 11:34 +0100
      Re: How to do a popup box bit-naughty@hotmail.com - 2015-06-26 12:36 -0700
        Re: How to do a popup box "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-06-26 21:58 +0200
          Re: How to do a popup box bit-naughty@hotmail.com - 2015-07-02 11:06 -0700
            Re: How to do a popup box "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-07-02 22:01 +0200
        Re: How to do a popup box Tim Streater <timstreater@greenbee.net> - 2015-06-26 22:32 +0100
          Re: How to do a popup box "Christoph M. Becker" <cmbecker69@arcor.de> - 2015-06-27 01:41 +0200
            Re: How to do a popup box Tim Streater <timstreater@greenbee.net> - 2015-06-27 08:51 +0100
              Re: How to do a popup box "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-06-27 09:57 +0200
                Re: How to do a popup box Erwin Moller <erwinmollerusenet@xs4all.nl> - 2015-06-29 15:39 +0200
              Re: How to do a popup box bit-naughty@hotmail.com - 2015-07-02 11:08 -0700
    Re: How to do a popup box "Leonardo Azpurua" <leonardo@exmvps.org> - 2015-06-30 12:32 -0430
      Re: How to do a popup box bit-naughty@hotmail.com - 2015-07-02 11:16 -0700

csiph-web