How to place a close icon at the top right corner for div with scroll bar?

Question

I have a modal box created by myself and I want to add a close button at the top right of the modal box. I want it to be a bit outside of the modal box. Like this:

(Taken from this site )

The cross at the top right corner is added with css as following:

#closeModal { 
    position:absolute;
    top:-12px; /* Half the icon's height */
    right:-12px; /* half the icon's width */
    z-index:50;
}

This work when the div is overlfow: visible; However, for my modal box, I have more content and I want it to be scroll-able when there are more content. So I need to set the div to be overflow: auto; The cross is then cut.

As the width of the modal box is set by pixel with auto center, putting the cross outside the modal box and make it position:fixed; doesn't work as there is no way to align with the modal box.

A JSFiddle showing the problem

So, is there a way to place the close icon as stated above while making the content scroll-able?

Answer 1

I would make an extra div, like that : https://jsfiddle.net/no7wjhm2/3/ .

<div class="testing-div">
    <span class="fa-stack fa-lg close-button">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-times fa-stack-1x fa-inverse"></i>
    </span>
<div class="testing-div2">

The parent div doesnt have overflow parameter. The child : overflow:hidden;

Answer 2

Put a wrapper around it and the style...

Here is a simple solution

<span class="fa-stack fa-lg close-button">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-times fa-stack-1x fa-inverse"></i>
    </span>

<div class="testing-div">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas est erat, hendrerit vel massa ut, pharetra facilisis dui. Aliquam egestas sodales leo, aliquet vehicula libero pretium vel. In quis lacinia massa. Ut pretium rutrum est sed mattis. Vivamus tempor est sapien, id volutpat ipsum vulputate ut. Cras viverra, ligula non blandit mollis, libero augue sollicitudin lectus, id scelerisque sem felis id mauris. Aenean et est fringilla, condimentum nisl varius, efficitur leo. Pellentesque iaculis, erat vestibulum malesuada posuere, augue orci blandit lorem, vel dictum nisi arcu sit amet justo. Nullam dapibus tincidunt felis, sed tincidunt eros fringilla vitae. Sed in turpis at neque hendrerit sagittis. Phasellus dapibus tempus lacus, a auctor nibh pretium a. In nec lobortis felis, at tincidunt odio. Vivamus ac convallis urna. Nullam suscipit dictum felis ut sodales. Aenean molestie, dui sit amet eleifend ullamcorper, mi elit condimentum elit, non ultricies erat orci feugiat sapien.

Curabitur efficitur sit amet eros a imperdiet. Donec vel enim eget odio suscipit viverra. Nunc venenatis tortor non sollicitudin ultrices. In consequat in augue in molestie. Quisque at ligula ex. Aenean tristique mollis dui non bibendum. Aenean sapien erat, porta vitae auctor vitae, aliquet at urna. Nullam ultricies dui vitae velit dapibus, id lacinia augue consequat. Donec elit nulla, laoreet non tellus ut, blandit egestas quam. Nullam at tristique tellus. Fusce lorem tortor, congue et facilisis sit amet, feugiat ac erat. Phasellus in vestibulum arcu.

Sed rutrum risus in venenatis congue. Curabitur in dui feugiat, pulvinar ligula sed, cursus dolor. Mauris tincidunt dolor ligula, ut feugiat tellus ullamcorper at. Fusce imperdiet egestas turpis vulputate dignissim. Proin aliquam arcu a nulla semper, eget pellentesque arcu lacinia. Suspendisse dictum lobortis libero eget tristique. Donec sit amet blandit nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec luctus consectetur justo, et ultrices enim. In in ante sagittis tellus iaculis scelerisque. Nulla eros justo, accumsan ut metus a, mollis accumsan diam. Nulla faucibus arcu nunc, ut posuere lacus dignissim a.

Integer volutpat augue sed sapien porttitor malesuada. Praesent eget magna ac nunc interdum suscipit. Vestibulum imperdiet in erat ut pellentesque. Etiam eget tincidunt metus. Nulla risus lacus, elementum in pharetra et, euismod eget tortor. Cras convallis vel lectus in tincidunt. Nullam vel justo at arcu aliquam efficitur. Nam cursus maximus urna, sed dignissim eros condimentum quis. In vehicula dolor justo, non consequat quam condimentum tempus. Praesent id justo neque. Nunc aliquam felis quis pulvinar egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin lacinia mattis hendrerit. Ut sed urna neque. Donec vitae fringilla neque, ac commodo ligula. Mauris iaculis augue nec maximus interdum.

Aenean metus odio, blandit tristique nibh gravida, fermentum condimentum nisl. Cras ultrices auctor enim, vel ultricies felis consectetur venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque sed metus neque. Pellentesque sed nisl laoreet, condimentum urna consectetur, efficitur lectus. Sed dapibus sodales nisl. Sed commodo ante nec felis ultrices finibus. Ut a semper ligula, id porttitor est. Phasellus pulvinar ipsum semper fermentum tincidunt. Aliquam erat volutpat. Duis maximus libero dolor, vitae feugiat purus feugiat ut. Mauris sollicitudin diam mi, sit amet auctor erat feugiat ac.
</div>

</div>

and css

.testing-div {
    position: relative;
    display: block;    
    height: 400px;
    width: 300px;
    overflow: auto;
}

.close-button {
    position: absolute;
    right: -35px;
    top: -35px;
}

.wrapper { height: 400px;
    width: 300px;position: relative;
    display: block; margin: 20px auto;}

Answer 3

Encolse your Modal box within an extra wrapper div , like below:

<div class="container">

       ....Modal....
</div>

CSS:

.container{

    margin:30px;
    position:relative;
    width:300px;
 }

 .testing-div {
    //position: relative;
    display: block;
   // margin-top: 10%;
   //margin-left: 20%;
   height: 400px;
   width: 300px;
   overflow: auto;
   //margin:50px;
 }

Fiddle : https://jsfiddle.net/no7wjhm2/5/ - See the working code here