1 reply [Last post]
Sun, 2020-12-13 22:37
ExternalUser1
ExternalUser1's picture
Offline
newbie
Last seen: 12 weeks 3 days ago
Timezone: GMT+1
Joined: 2020-10-10
Posts: 7
Points: 14

Hi, I am not a dev but I need to position a popup. I found what I need here: https://www.w3schools.com/css/css_positioning.asp I need the to position my popup as in the last link under section "position: absolute"...

div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}

div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}

The problem is that someone gave me the code bellow and it´s just 1 div, I think I need to created 2 div from it as it´s above but as I am not a dev I donot know how to do it. Bellow is my code...

If anyone could modify it in order for my popup to be ´position: absolute´ i would appreciate!

Thanks in advance!

X

Popup content....

//

Top
  • Login or register to post comments
Tags:
Sun, 2020-12-13 22:38
#1
ExternalUser1
ExternalUser1's picture
Offline
newbie
Last seen: 12 weeks 3 days ago
Timezone: GMT+1
Joined: 2020-10-10
Posts: 7
Points: 14

My code... <img

My code...

<img class="img-responsive atto_image_button_text-bottom" onclick="showcontent1()" src="https:.../infopng-b.png?time=1607298509862" alt="" width="31" height="31" role="presentation">
<p></p>
<p></p>
<p></p>
<p></p>
<p><br><br></p>
<p></p>
<div id="contnt-img-1" class="tooltip-content" style="display: none; border: 4px solid orange; width: 380px; top: 88%; right: 17%; position: absolute; background-color: #fff; padding: .5em;"><button id="close-cnt1 " style="position: relative; background: none; border: none; top: -5px; right: -5px;" onclick="closecontent1(); return false; "> X </button>
    <p>Popup content....</p>
</div>
<script type="text/javascript">
    // <![CDATA[
    function showcontent1() {
        document.getElementById('contnt-img-1').style.display = 'block';
    }
 
    function closecontent1() {
        document.getElementById('contnt-img-1').style.display = 'none';
        return false;
    }
    // ]]>
</script>

Top