Creating a personalized pop-up container similar to the style seen on YouTube

I am looking to create a popup window similar to the YouTube share feature where it sticks next to a button. I have tried using Bootstrap modal, but it opens in the middle of the screen. I want the popup to appear around the button when the YouTube share button is clicked.

Does anyone know how to achieve this?

https://i.sstatic.net/pfSkT.png

Here is the HTML code:

<div class="box">
  <a class="button" href="#popup1">share</a>
</div>

<div id="popup1" class="overlay">
  <div class="popup">
    <a class="close" href="#">&times;</a>
    <div class="content">
      <div class="social-fuctions">
        Share to Facebook
      </div>
    </div>
  </div>
</div>


CSS Code

    h1 {
      text-align: center;
      font-family: Tahoma, Arial, sans-serif;
      color: #06D85F;
      margin: 80px 0;
    }

    .box {
      width: 40%;
      margin: 0 auto;
      background: rgba(255,255,255,0.2);
      padding: 35px;
      border: 2px solid #fff;
      border-radius: 20px/50px;
      background-clip: padding-box;
      text-align: center;
    }

    .social-fuctions{
      display: flex;
    }

    .overlay {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.2);
      visibility: hidden;
      opacity: 0;
    }
    
    .overlay:target {
      visibility: visible;
      opacity: 1;
    }

    .popup {
      position: absolute;
      bottom: -550px;
      right: 5%;
      left: 15%;
      padding: 15px;
      background: #fff;
      border-radius: 5px;
      width: 30%;
      position: relative;
    }

    .popup .close {
      position: absolute;
      top: 20px;
      right: 30px;
      font-size: 30px;
      font-weight: bold;
      text-decoration: none;
      color: #333;
    }

    .popup .close:hover {
      color: #06D85F;
    }

    .popup .content {
      max-height: 30%;
      overflow: auto;
    }

    @media screen and (max-width: 700px){
      .box{
        width: 70%;
      }
      .popup{
        width: 70%;
      }
    }

Any suggestions on how to make this work as intended? Thank you!

csspopupwindow

Answer №1

To ensure proper positioning of the modal box or pop up, set your box to position: relative and nest the modal box within the box div as a child element. This will allow the overlay to be positioned absolutely within the boundaries of its parent div.

.box {
position: relative;
}

.modal {
position: absolute;
}

For reference, you can check out an example like this: https://jsfiddle.net/bommy8zu/5/

Answer №2

The approach taken by Moosetuin is both straightforward and impactful. Rather than using a relative parent, an absolute Modal is implemented.

I have created two examples - one resembling Youtube's ShareBox, and the other guaranteed to remain centered at all times.

Instructions for centering are as follows:

position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;

Feel free to explore more at: https://codepen.io/Tibixx/pen/zWEpqq

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Challenges with moving images in Unslider

There seems to be an issue with the unslider-arrows on the unslider banner. The images are not sliding properly when transitioning to the next image without user input. Instead, they resize from small to full size starting at the top of the .banner div. ...

javascriptjqueryhtmlcss

Organizing Content with CSS/Bootstrap Grid Row Alignment

I'm struggling to figure out why there is extra space above the nested grid row. I want to center align it, similar to how you would do in Excel. Any suggestions on how to achieve this? My layout includes a fluid container with a nested grid row cons ...

csstwitter-bootstrapbootstrap-4dreamweaver

Mobile responsiveness of Bootstrap navbar

Currently, I am in the process of constructing a Bootstrap 4 website using Jekyll. Each page features a jumbotron that serves as a hero header and everything is functioning smoothly.However, when I resize the viewport to a mobile size, the jumbotron ends u ...

htmlcssresponsive-designbootstrap-4jekyll

Creating a perpetual loop animation for two divs moving from right to left endlessly

Here is the code I have: HTML <div class="screen screen1"></div> <div class="screen screen2"></div> CSS .screen{ width: 100%; height: 50%; position: absolute; background-color:#001; background-image: radial- ...

javascriptjqueryhtmlcssjquery-animate

What could be the reason for the top alignment of only a portion of the cell

Here is the code snippet I am working with: <html> <head> <style> table.t_group { border: 2px solid black; margin: 0 auto 0 auto; } table.t_group > tbo ...

htmlcss

Steps to establish the starting value as 'Concealed'

I stumbled upon this interesting example that demonstrates how to create expandable/collapsible text when clicked. My question is, how can I initially set the value to be hidden so that the paragraph starts off collapsed and expands only when clicked? He ...

javascripthtmlcss

Tips for designing a unique custom scrollbar

I'm in need of some CSS expertise to help me create a custom scroll bar that resembles the one shown in the image. The key requirement is for the background to be transparent, although I've temporarily positioned it against a green backdrop. ...

css

Position navbar contents at the top of the screen

As I delve into learning Bootstrap4, I have come across the following snippet of HTML code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> ...

htmlcssbootstrap-4

How about: "What about Using Percentage-Based Image Holders?"

I'm wondering if it's possible to use a placeholder with percentages instead of pixels. I know there's code that allows for pixel dimensions, but is there a way to use percentages? Currently, the code for the placeholder is img src="http://p ...

htmlcssimageplaceholderwireframe

Problem with layout design (utilizing float properties)

I'm curious why the paragraph content gets sandwiched between two floated divs. I'd like the paragraph content to appear below the header. Also, why aren't the line breaks showing in the paragraph? Check out this JS Fiddle link for referenc ...

htmlcss

Can someone explain why my button icons are not aligning to the center properly?

I have a small issue with the icons I pulled from react-icons - they appear slightly raised within the buttons. How can I position them in the middle? That's my only query, but I can't post it alone due to mostly having code in my post. What an ...

javascriptcssreactjs

Images displayed in the Slick carousel are automatically given a stylish padding

I'm facing an issue with my slick-carousel where there seems to be a large padding on the right side of the images, extending all the way up to the next product image. I've tried removing margins and paddings from my code but it hasn't resol ...

cssimageshopifypaddingslick.js

Using the contents of a text file as text in an HTML document

I've come up with a clever time-saving trick for my website template project. I want to streamline the process of changing large text files by having a separate plain text document that will automatically transfer its contents to a designated paragrap ...

javascriptjqueryhtmlcsstext

Adjust the spacing between the title and other elements in an R Shiny application

How do I modify the font and size of a title, as well as add some spacing between the title and other elements? navbar <- navbarPage( Title = "Intervals", tabPanel("Data Import", sidebarLayout(sidebarPanel(fi ...

cssrshiny

Experiencing difficulties with setting the width of owl carousel

Here is the HTML code snippet: <div class="row"> <div class="col-lg-7 col-sm-6"> <div class="owl-carousel" id="homeCarousel"> <div class="item"> <img src="images/brela.jpg" alt="brela makarska"> </d ...

htmlcss

issue arising from unique style identifiers in FireFox while making changes to styles via document.styleSheets

While experimenting with altering some stylesheets using JavaScript, I encountered an interesting issue: When attempting to set an attribute on a style rule in Firefox and the property is one of their proprietary ones, it fails silently. To demonstrate th ...

javascriptcssfirefox

Attempting to create a multi-page slider using a combination of CSS and JavaScript

Looking for help with creating a slider effect that is triggered when navigating to page 2. Ideally, the div should expand with a width of 200% or similar. Any assistance would be greatly appreciated! http://jsfiddle.net/juxzg6fn/ <html> <head& ...

javascripthtmlcssslider

Conceal content within a bullet point

I'm encountering an issue with this specific element. HTML <div class="navbar slide-menu"> <div class="container"> <ul class="nav navbar-default"> <li class="brand"><a href="#">Menu</a></li> ...

jqueryhtmlcss

Let's experiment with creating a horizontal bootstrap form featuring three columns

I am struggling to create a horizontal form with three fields due to the space issue between the label and input type elements. My goal is to minimize the space between the label and input. Here is the HTML code snippet: <div class="container-flu ...

htmlcss

Creating a list of font sizes for each <p> tag in my HTML document

I am looking to create an array containing the font sizes of all the p tags in my HTML document. How can I specifically target only the p elements and not their parent elements? ...

javascripthtmlcss