Text running out the bottom of popup windowVertically align text next to an image?How to align content of a div to the bottomHow do I give text or an image a transparent background using CSS?How to disable text selection highlightingAligning HTML headings with hanging section numbers?How to make a div 100% height of the browser windowHow do I vertically center text with CSS?Zend PDF: How do I print bold text or text in another color etc?Mark words that blend in to the mark up perfectly and keep mark up validTYPO 7.6 Display Content
Ideas behind the 8.Bd3 line in the 4.Ng5 Two Knights Defense
In what language did Túrin converse with Mím?
How can I store milk for long periods of time?
Create a list of snaking numbers under 50,000
How do I get my neighbour to stop disturbing with loud music?
Existing light fixture is connected to 2 white wires, black wires are capped
Four day weekend?
How to differentiate between two people with the same name in a story?
In Mathematics, what is the standing of the journal Proc. AMS?
I was given someone else's visa, stamped in my passport
What is this "opened" cube called?
When you have to wait for a short time
New coworker has strange workplace requirements - how should I deal with them?
Why do presidential pardons exist in a country having a clear separation of powers?
How does Hand of the Apprentice interact with rogue abilities?
Quick Tilepaint Puzzles: Corridors and Corners
Why does the U.S. military maintain their own weather satellites?
Necessity of tenure for lifetime academic research
Can UV radiation be safe for the skin?
Does Q ever actually lie?
Ways you can end up paying interest on a credit card if you pay the full amount back in due time
German equivalent to "going down the rabbit hole"
How to draw a true pie chart?
A vector is defined to have a magnitude and *a* direction, but the zero vector has no *single* direction. So, how is the zero vector a vector?
Text running out the bottom of popup window
Vertically align text next to an image?How to align content of a div to the bottomHow do I give text or an image a transparent background using CSS?How to disable text selection highlightingAligning HTML headings with hanging section numbers?How to make a div 100% height of the browser windowHow do I vertically center text with CSS?Zend PDF: How do I print bold text or text in another color etc?Mark words that blend in to the mark up perfectly and keep mark up validTYPO 7.6 Display Content
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I am trying to create a popup that is centered on the screen both horizontally and vertically, with a maximum width is 60% of the window width, and the maximum height is 60% of the window height. When I resize the window the text runs out the bottom of the popup though. Is there a way to contain the text and keep it proportional to the popup window size?
$(function()
//----- OPEN
$('[data-popup-open]').on('click', function(e)
var targeted_popup_class = jQuery(this).attr('data-popup-open');
$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
e.preventDefault();
);
//----- CLOSE
$('[data-popup-close]').on('click', function(e)
var targeted_popup_class = jQuery(this).attr('data-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
);
);
.popup
max-width:60%;
max-height:60%;
display:none;
position: fixed;
top: 50%;
left: 50%;
.popup-inner
max-width:60%;
max-height:60%;
/* padding:40px; */
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
box-shadow:0px 2px 6px rgba(0,0,0,1);
border-radius:3px;
color: orange;
font-size: 4vh;
background: rgba(0, 0, 0, 0.8);
border: 3px solid orange;
border-radius: 10px;
border-color: orange;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="popup" data-popup="popup-1">
<div class="popup-inner">
<p>
<table>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
<tr><td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
</table>
</p>
<!-- <p><a data-popup-close="popup-1" href="#">Close</a></p> -->
<a class="popup-close" data-popup-close="popup-1" href="#"></a>
</div>
</div>html css
asked Mar 28 at 0:11
JuiceboxJuicebox
12 bronze badges
add a comment |
I am trying to create a popup that is centered on the screen both horizontally and vertically, with a maximum width is 60% of the window width, and the maximum height is 60% of the window height. When I resize the window the text runs out the bottom of the popup though. Is there a way to contain the text and keep it proportional to the popup window size?
$(function()
//----- OPEN
$('[data-popup-open]').on('click', function(e)
var targeted_popup_class = jQuery(this).attr('data-popup-open');
$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
e.preventDefault();
);
//----- CLOSE
$('[data-popup-close]').on('click', function(e)
var targeted_popup_class = jQuery(this).attr('data-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
);
);
.popup
max-width:60%;
max-height:60%;
display:none;
position: fixed;
top: 50%;
left: 50%;
.popup-inner
max-width:60%;
max-height:60%;
/* padding:40px; */
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
box-shadow:0px 2px 6px rgba(0,0,0,1);
border-radius:3px;
color: orange;
font-size: 4vh;
background: rgba(0, 0, 0, 0.8);
border: 3px solid orange;
border-radius: 10px;
border-color: orange;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="popup" data-popup="popup-1">
<div class="popup-inner">
<p>
<table>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
<tr><td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
</table>
</p>
<!-- <p><a data-popup-close="popup-1" href="#">Close</a></p> -->
<a class="popup-close" data-popup-close="popup-1" href="#"></a>
</div>
</div>html css
asked Mar 28 at 0:11
JuiceboxJuicebox
12 bronze badges
Your code results in a blank white page...
– Jodast
Mar 28 at 0:39
add a comment |
I am trying to create a popup that is centered on the screen both horizontally and vertically, with a maximum width is 60% of the window width, and the maximum height is 60% of the window height. When I resize the window the text runs out the bottom of the popup though. Is there a way to contain the text and keep it proportional to the popup window size?
$(function()
//----- OPEN
$('[data-popup-open]').on('click', function(e)
var targeted_popup_class = jQuery(this).attr('data-popup-open');
$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
e.preventDefault();
);
//----- CLOSE
$('[data-popup-close]').on('click', function(e)
var targeted_popup_class = jQuery(this).attr('data-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
);
);
.popup
max-width:60%;
max-height:60%;
display:none;
position: fixed;
top: 50%;
left: 50%;
.popup-inner
max-width:60%;
max-height:60%;
/* padding:40px; */
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
box-shadow:0px 2px 6px rgba(0,0,0,1);
border-radius:3px;
color: orange;
font-size: 4vh;
background: rgba(0, 0, 0, 0.8);
border: 3px solid orange;
border-radius: 10px;
border-color: orange;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="popup" data-popup="popup-1">
<div class="popup-inner">
<p>
<table>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
<tr><td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
</table>
</p>
<!-- <p><a data-popup-close="popup-1" href="#">Close</a></p> -->
<a class="popup-close" data-popup-close="popup-1" href="#"></a>
</div>
</div>html css
asked Mar 28 at 0:11
JuiceboxJuicebox
12 bronze badges
I am trying to create a popup that is centered on the screen both horizontally and vertically, with a maximum width is 60% of the window width, and the maximum height is 60% of the window height. When I resize the window the text runs out the bottom of the popup though. Is there a way to contain the text and keep it proportional to the popup window size?
$(function()
//----- OPEN
$('[data-popup-open]').on('click', function(e)
var targeted_popup_class = jQuery(this).attr('data-popup-open');
$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
e.preventDefault();
);
//----- CLOSE
$('[data-popup-close]').on('click', function(e)
var targeted_popup_class = jQuery(this).attr('data-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
);
);
.popup
max-width:60%;
max-height:60%;
display:none;
position: fixed;
top: 50%;
left: 50%;
.popup-inner
max-width:60%;
max-height:60%;
/* padding:40px; */
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
box-shadow:0px 2px 6px rgba(0,0,0,1);
border-radius:3px;
color: orange;
font-size: 4vh;
background: rgba(0, 0, 0, 0.8);
border: 3px solid orange;
border-radius: 10px;
border-color: orange;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="popup" data-popup="popup-1">
<div class="popup-inner">
<p>
<table>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
<tr><td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
</table>
</p>
<!-- <p><a data-popup-close="popup-1" href="#">Close</a></p> -->
<a class="popup-close" data-popup-close="popup-1" href="#"></a>
</div>
</div>
$(function()
//----- OPEN
$('[data-popup-open]').on('click', function(e)
var targeted_popup_class = jQuery(this).attr('data-popup-open');
$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
e.preventDefault();
);
//----- CLOSE
$('[data-popup-close]').on('click', function(e)
var targeted_popup_class = jQuery(this).attr('data-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
);
);
.popup
max-width:60%;
max-height:60%;
display:none;
position: fixed;
top: 50%;
left: 50%;
.popup-inner
max-width:60%;
max-height:60%;
/* padding:40px; */
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
box-shadow:0px 2px 6px rgba(0,0,0,1);
border-radius:3px;
color: orange;
font-size: 4vh;
background: rgba(0, 0, 0, 0.8);
border: 3px solid orange;
border-radius: 10px;
border-color: orange;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="popup" data-popup="popup-1">
<div class="popup-inner">
<p>
<table>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
<tr><td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
</table>
</p>
<!-- <p><a data-popup-close="popup-1" href="#">Close</a></p> -->
<a class="popup-close" data-popup-close="popup-1" href="#"></a>
</div>
</div>
$(function()
//----- OPEN
$('[data-popup-open]').on('click', function(e)
var targeted_popup_class = jQuery(this).attr('data-popup-open');
$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
e.preventDefault();
);
//----- CLOSE
$('[data-popup-close]').on('click', function(e)
var targeted_popup_class = jQuery(this).attr('data-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
);
);
.popup
max-width:60%;
max-height:60%;
display:none;
position: fixed;
top: 50%;
left: 50%;
.popup-inner
max-width:60%;
max-height:60%;
/* padding:40px; */
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
box-shadow:0px 2px 6px rgba(0,0,0,1);
border-radius:3px;
color: orange;
font-size: 4vh;
background: rgba(0, 0, 0, 0.8);
border: 3px solid orange;
border-radius: 10px;
border-color: orange;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="popup" data-popup="popup-1">
<div class="popup-inner">
<p>
<table>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
<tr><td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
</table>
</p>
<!-- <p><a data-popup-close="popup-1" href="#">Close</a></p> -->
<a class="popup-close" data-popup-close="popup-1" href="#"></a>
</div>
</div>html css
html css
asked Mar 28 at 0:11
JuiceboxJuicebox
12 bronze badges
asked Mar 28 at 0:11
JuiceboxJuicebox
12 bronze badges
asked Mar 28 at 0:11
JuiceboxJuicebox
12 bronze badges
asked Mar 28 at 0:11
JuiceboxJuicebox
12 bronze badges
asked Mar 28 at 0:11
JuiceboxJuicebox
12 bronze badges
12 bronze badges
Your code results in a blank white page...
– Jodast
Mar 28 at 0:39
add a comment |
Your code results in a blank white page...
– Jodast
Mar 28 at 0:39
Your code results in a blank white page...
– Jodast
Mar 28 at 0:39
Your code results in a blank white page...
– Jodast
Mar 28 at 0:39
add a comment |
1 Answer
1
active
oldest
votes
How about this?
Have .popup to work as a container so it should have the border, background and shadow instead of having those on .popup-inner.
How .popup is getting centered is having the element's top edge 20% away from top of the window, bottom edge 20% away from bottom of the window, left edge & right edge 20% from left & right edge of the window respectively.
Adding all these up makes 40% vertical space and 40% horizontal space which will achieve your 60% of width and height.
How the text is being contained within .popup here is by using overflow.
.popup's overflow: hidden means that anything outside of .popup will always be hidden.
While .popup-inner's overflow: auto will enable scrolling when the content exceeds the element's area and if all content is within the element, no scrolling will be made available.
$(function()
//----- OPEN
$('[data-popup-open]').on('click', function(e)
var targeted_popup_class = jQuery(this).attr('data-popup-open');
$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
e.preventDefault();
);
//----- CLOSE
$('[data-popup-close]').on('click', function(e)
var targeted_popup_class = jQuery(this).attr('data-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
);
);.popup
display: block;
position: fixed;
left: 20%;
right: 20%;
top: 20%;
bottom: 20%;
box-shadow:0px 2px 6px rgba(0,0,0,1);
border-radius:3px;
color: orange;
border: 3px solid orange;
border-radius: 10px;
background: rgba(0, 0, 0, 0.8);
font-size: 4vh;
overflow: hidden;
.popup-inner
position: absolute;
width: 96%;
height: 96%;
padding: 2%;
overflow: auto;
.popup-close
color: white;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="popup" data-popup="popup-1">
<div class="popup-inner">
<p>
<table>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
</table>
</p>
<!-- <p><a data-popup-close="popup-1" href="#">Close</a></p> -->
<a class="popup-close" data-popup-close="popup-1" href="#">Close</a>
</div>
</div>answered Mar 28 at 0:39
josephtingjosephting
2,0751 gold badge22 silver badges29 bronze badges
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55388334%2ftext-running-out-the-bottom-of-popup-window%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
How about this?
Have .popup to work as a container so it should have the border, background and shadow instead of having those on .popup-inner.
How .popup is getting centered is having the element's top edge 20% away from top of the window, bottom edge 20% away from bottom of the window, left edge & right edge 20% from left & right edge of the window respectively.
Adding all these up makes 40% vertical space and 40% horizontal space which will achieve your 60% of width and height.
How the text is being contained within .popup here is by using overflow.
.popup's overflow: hidden means that anything outside of .popup will always be hidden.
While .popup-inner's overflow: auto will enable scrolling when the content exceeds the element's area and if all content is within the element, no scrolling will be made available.
$(function()
//----- OPEN
$('[data-popup-open]').on('click', function(e)
var targeted_popup_class = jQuery(this).attr('data-popup-open');
$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
e.preventDefault();
);
//----- CLOSE
$('[data-popup-close]').on('click', function(e)
var targeted_popup_class = jQuery(this).attr('data-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
);
);.popup
display: block;
position: fixed;
left: 20%;
right: 20%;
top: 20%;
bottom: 20%;
box-shadow:0px 2px 6px rgba(0,0,0,1);
border-radius:3px;
color: orange;
border: 3px solid orange;
border-radius: 10px;
background: rgba(0, 0, 0, 0.8);
font-size: 4vh;
overflow: hidden;
.popup-inner
position: absolute;
width: 96%;
height: 96%;
padding: 2%;
overflow: auto;
.popup-close
color: white;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="popup" data-popup="popup-1">
<div class="popup-inner">
<p>
<table>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
</table>
</p>
<!-- <p><a data-popup-close="popup-1" href="#">Close</a></p> -->
<a class="popup-close" data-popup-close="popup-1" href="#">Close</a>
</div>
</div>answered Mar 28 at 0:39
josephtingjosephting
2,0751 gold badge22 silver badges29 bronze badges
add a comment |
How about this?
Have .popup to work as a container so it should have the border, background and shadow instead of having those on .popup-inner.
How .popup is getting centered is having the element's top edge 20% away from top of the window, bottom edge 20% away from bottom of the window, left edge & right edge 20% from left & right edge of the window respectively.
Adding all these up makes 40% vertical space and 40% horizontal space which will achieve your 60% of width and height.
How the text is being contained within .popup here is by using overflow.
.popup's overflow: hidden means that anything outside of .popup will always be hidden.
While .popup-inner's overflow: auto will enable scrolling when the content exceeds the element's area and if all content is within the element, no scrolling will be made available.
$(function()
//----- OPEN
$('[data-popup-open]').on('click', function(e)
var targeted_popup_class = jQuery(this).attr('data-popup-open');
$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
e.preventDefault();
);
//----- CLOSE
$('[data-popup-close]').on('click', function(e)
var targeted_popup_class = jQuery(this).attr('data-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
);
);.popup
display: block;
position: fixed;
left: 20%;
right: 20%;
top: 20%;
bottom: 20%;
box-shadow:0px 2px 6px rgba(0,0,0,1);
border-radius:3px;
color: orange;
border: 3px solid orange;
border-radius: 10px;
background: rgba(0, 0, 0, 0.8);
font-size: 4vh;
overflow: hidden;
.popup-inner
position: absolute;
width: 96%;
height: 96%;
padding: 2%;
overflow: auto;
.popup-close
color: white;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="popup" data-popup="popup-1">
<div class="popup-inner">
<p>
<table>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
</table>
</p>
<!-- <p><a data-popup-close="popup-1" href="#">Close</a></p> -->
<a class="popup-close" data-popup-close="popup-1" href="#">Close</a>
</div>
</div>answered Mar 28 at 0:39
josephtingjosephting
2,0751 gold badge22 silver badges29 bronze badges
add a comment |
How about this?
Have .popup to work as a container so it should have the border, background and shadow instead of having those on .popup-inner.
How .popup is getting centered is having the element's top edge 20% away from top of the window, bottom edge 20% away from bottom of the window, left edge & right edge 20% from left & right edge of the window respectively.
Adding all these up makes 40% vertical space and 40% horizontal space which will achieve your 60% of width and height.
How the text is being contained within .popup here is by using overflow.
.popup's overflow: hidden means that anything outside of .popup will always be hidden.
While .popup-inner's overflow: auto will enable scrolling when the content exceeds the element's area and if all content is within the element, no scrolling will be made available.
$(function()
//----- OPEN
$('[data-popup-open]').on('click', function(e)
var targeted_popup_class = jQuery(this).attr('data-popup-open');
$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
e.preventDefault();
);
//----- CLOSE
$('[data-popup-close]').on('click', function(e)
var targeted_popup_class = jQuery(this).attr('data-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
);
);.popup
display: block;
position: fixed;
left: 20%;
right: 20%;
top: 20%;
bottom: 20%;
box-shadow:0px 2px 6px rgba(0,0,0,1);
border-radius:3px;
color: orange;
border: 3px solid orange;
border-radius: 10px;
background: rgba(0, 0, 0, 0.8);
font-size: 4vh;
overflow: hidden;
.popup-inner
position: absolute;
width: 96%;
height: 96%;
padding: 2%;
overflow: auto;
.popup-close
color: white;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="popup" data-popup="popup-1">
<div class="popup-inner">
<p>
<table>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
</table>
</p>
<!-- <p><a data-popup-close="popup-1" href="#">Close</a></p> -->
<a class="popup-close" data-popup-close="popup-1" href="#">Close</a>
</div>
</div>answered Mar 28 at 0:39
josephtingjosephting
2,0751 gold badge22 silver badges29 bronze badges
How about this?
Have .popup to work as a container so it should have the border, background and shadow instead of having those on .popup-inner.
How .popup is getting centered is having the element's top edge 20% away from top of the window, bottom edge 20% away from bottom of the window, left edge & right edge 20% from left & right edge of the window respectively.
Adding all these up makes 40% vertical space and 40% horizontal space which will achieve your 60% of width and height.
How the text is being contained within .popup here is by using overflow.
.popup's overflow: hidden means that anything outside of .popup will always be hidden.
While .popup-inner's overflow: auto will enable scrolling when the content exceeds the element's area and if all content is within the element, no scrolling will be made available.
$(function()
//----- OPEN
$('[data-popup-open]').on('click', function(e)
var targeted_popup_class = jQuery(this).attr('data-popup-open');
$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
e.preventDefault();
);
//----- CLOSE
$('[data-popup-close]').on('click', function(e)
var targeted_popup_class = jQuery(this).attr('data-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
);
);.popup
display: block;
position: fixed;
left: 20%;
right: 20%;
top: 20%;
bottom: 20%;
box-shadow:0px 2px 6px rgba(0,0,0,1);
border-radius:3px;
color: orange;
border: 3px solid orange;
border-radius: 10px;
background: rgba(0, 0, 0, 0.8);
font-size: 4vh;
overflow: hidden;
.popup-inner
position: absolute;
width: 96%;
height: 96%;
padding: 2%;
overflow: auto;
.popup-close
color: white;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="popup" data-popup="popup-1">
<div class="popup-inner">
<p>
<table>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
</table>
</p>
<!-- <p><a data-popup-close="popup-1" href="#">Close</a></p> -->
<a class="popup-close" data-popup-close="popup-1" href="#">Close</a>
</div>
</div>$(function()
//----- OPEN
$('[data-popup-open]').on('click', function(e)
var targeted_popup_class = jQuery(this).attr('data-popup-open');
$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
e.preventDefault();
);
//----- CLOSE
$('[data-popup-close]').on('click', function(e)
var targeted_popup_class = jQuery(this).attr('data-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
);
);.popup
display: block;
position: fixed;
left: 20%;
right: 20%;
top: 20%;
bottom: 20%;
box-shadow:0px 2px 6px rgba(0,0,0,1);
border-radius:3px;
color: orange;
border: 3px solid orange;
border-radius: 10px;
background: rgba(0, 0, 0, 0.8);
font-size: 4vh;
overflow: hidden;
.popup-inner
position: absolute;
width: 96%;
height: 96%;
padding: 2%;
overflow: auto;
.popup-close
color: white;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="popup" data-popup="popup-1">
<div class="popup-inner">
<p>
<table>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
</table>
</p>
<!-- <p><a data-popup-close="popup-1" href="#">Close</a></p> -->
<a class="popup-close" data-popup-close="popup-1" href="#">Close</a>
</div>
</div>$(function()
//----- OPEN
$('[data-popup-open]').on('click', function(e)
var targeted_popup_class = jQuery(this).attr('data-popup-open');
$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
e.preventDefault();
);
//----- CLOSE
$('[data-popup-close]').on('click', function(e)
var targeted_popup_class = jQuery(this).attr('data-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
);
);.popup
display: block;
position: fixed;
left: 20%;
right: 20%;
top: 20%;
bottom: 20%;
box-shadow:0px 2px 6px rgba(0,0,0,1);
border-radius:3px;
color: orange;
border: 3px solid orange;
border-radius: 10px;
background: rgba(0, 0, 0, 0.8);
font-size: 4vh;
overflow: hidden;
.popup-inner
position: absolute;
width: 96%;
height: 96%;
padding: 2%;
overflow: auto;
.popup-close
color: white;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="popup" data-popup="popup-1">
<div class="popup-inner">
<p>
<table>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
<tr>
<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
</tr>
</table>
</p>
<!-- <p><a data-popup-close="popup-1" href="#">Close</a></p> -->
<a class="popup-close" data-popup-close="popup-1" href="#">Close</a>
</div>
</div>answered Mar 28 at 0:39
josephtingjosephting
2,0751 gold badge22 silver badges29 bronze badges
answered Mar 28 at 0:39
josephtingjosephting
2,0751 gold badge22 silver badges29 bronze badges
answered Mar 28 at 0:39
josephtingjosephting
2,0751 gold badge22 silver badges29 bronze badges
answered Mar 28 at 0:39
josephtingjosephting
2,0751 gold badge22 silver badges29 bronze badges
2,0751 gold badge22 silver badges29 bronze badges
add a comment |
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55388334%2ftext-running-out-the-bottom-of-popup-window%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Your code results in a blank white page...
– Jodast
Mar 28 at 0:39