Pop up page (like dribbble.com)
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi,
When a user clicks on a product card (link) on the home page, I want the product details page to appear in a pop up page that covers a portion of the website and can be dismissed by clicking on the close button.

A live example is dribbble.com

Vanilla JavaScript only.

Thank you

awarded to kostasx

Crowdsource coding tasks.

1 Solution

Winning solution

Load external page and place the content inside the modal
Link: https://drive.google.com/open?id=1YO0j623K6BDa8My7MZSA_NSxUuLyOvr7
( You will need to run this from a local server )

This code loads the file named 'product.html' when the user clicks on the modal button, fetches the page, grabs the main content (div .product) and places the content inside the modal box.

This is the plain CSS (and optional JS) solution:

HTML

    <div class="wrap">

    <h1>Modal - Pure CSS (no JavaScript) - 2013</h1>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita ullam et est ut enim commodi adipisci eius in, unde provident vero eligendi mollitia quia! Nihil totam expedita magni error hic.</p>

    <a href="#modal" class="btn btn-big">Click Me!</a>

    </div>

    <!-- Modal -->
    <div class="modal" id="modal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-header">
        <h2>Modal Title</h2>
        <a href="#" class="btn-close" aria-hidden="true">×</a>
        </div>
        <div style="text-align:center;" class="modal-body">
        <img width="50%" src="https://cdn.lynda.com/course/734634/734634-636711307501253109-16x9.jpg" />
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus cumque deserunt esse nam qui eveniet obcaecati facere eius temporibus est sed, cum veniam officia. Provident eveniet iste repellendus totam laboriosam.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus cumque deserunt esse nam qui eveniet obcaecati facere eius temporibus est sed, cum veniam officia. Provident eveniet iste repellendus totam laboriosam.</p>
        </div>
        <div class="modal-footer">
        <a href="#" class="btn">Close Modal</a>
        </div>
    </div>
    </div>
    <!-- /Modal -->

CSS:

    body {
    background-color: #e9e6df;
    color: #333;
    font-family: 'Helvetica', arial;
    }
    .wrap {
    padding: 40px;
    text-align: center;
    }
    h1 { font-size: 30px; }
    p { margin: 20px; }
    .btn {
    background: #428bca;
    border: #357ebd solid 1px;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    position: relative;
    transition: color 0.1s ease;
    font-size: 18px;
    padding: 15px 20px;
    min-width: 100px;
    }
    .btn:hover {
    background: #357ebd;
    }
    .btn-close {
    color: #aaa;
    font-size: 30px;
    text-decoration: none;
    position: absolute;
    right: 5px;
    top: 0;
    }
    .btn-close:hover {
    color: #919191;
    }
    .modal:before {
    content: "";
    display: none;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    }
    .modal:target:before {
    display: block;
    }
    .modal:target .modal-dialog {
    display: block;
    }
    .modal-dialog {
    display: none;
    background: #fefefe;
    border: #333 solid 1px;
    border-radius: 5px;
    transform: translate(-50%,-50%);
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 11;
    width: 50%;
    }
    .modal-body {
    padding: 20px;
    }
    .modal-header,
    .modal-footer {
    padding: 10px 20px;
    }
    .modal-header {
    border-bottom: #eee solid 1px;
    }
    .modal-header h2 {
    font-size: 20px;
    }
    .modal-footer {
    border-top: #eee solid 1px;
    text-align: right;
    }

EXAMPLE:
https://codepen.io/kostasx/pen/exbryq?editors=1100

The code works with pure CSS. If you want to enable JavaScript, you can follow the instructions found in the CodePen. All you need to do is uncomment the JS code and comment a single line of CSS.
kostasx 6 months ago
Hi, The product page will be a separate page (will have its own url) and not a within home page. Can you apply this concept to your solution? or guide me how to? Thank you.
Abdulfath 6 months ago
Yes, we can. I will update the CodePen and send you a link.
kostasx 6 months ago
Updated.
kostasx 6 months ago
Many thanks.. and sorry for the delay.
Abdulfath 6 months ago
Thank you!
kostasx 6 months ago