Position modal popup in center of screen with display table above body text

vinpkl · September 4, 2016, 6:45am

hi all

Position modal popup in center of screen with display table above bodytext

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
body{margin:0; padding:0;}
.bodytext{position:relative;}

#modal{
    display: table;
    height: 100%;
    width: 100%;
    position:absolute;
    background-color:#FF0000;
}
#modal_inside {
    display: table-cell;
    vertical-align: middle;
}
.model_content {
    width: 300px;
    padding: 5px;
    margin: 7px auto;   
    text-align: center;
}
#bluebox {
    background: aqua;
}
.showcart{background:red; width:100px; height:30px; color:#FFFFFF; border:0;}
</style>
</head>
<body>

<div class="bodytext">This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here  This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here

<!--modal starts-->
<div id="modal">   
<div id="modal_inside">
    <div class="model_content"><p id="bluebox">model content</p></div>
</div>
</div>
<!-- modal ends-->

</div>
</body>
</html>

John_Betong · September 4, 2016, 7:22am

Did you see the following article:

vinpkl · September 4, 2016, 7:51am

if in full site, there is just one popup

then do you think google will penalise for one popup also ??

vineet

m3g4p0p · September 4, 2016, 8:09am

A percentage width doesn’t refer to the content of the element itself, but to the width of the parent – so with a width of 100% there’s nothing to centre. You might try something like

#modal {
  width: 80%;
  left: 10%;
}

If you want to exactly fit the content, you’d have to use width: auto; however, the usual margin: 0 auto doesn’t work on absolutely positioned elements. So might put your modal inside another wrapper div, like

HTML

<div class="wrapper">
  <div id="modal">   
    <div id="modal_inside">
      <div class="model_content"><p id="bluebox">model content</p></div>
    </div>
  </div>
</div>

CSS

.wrapper {
    position: absolute;
    width: 100%;
}

#modal{
    display: table;
    width: auto;
    margin: 0 auto;
}

This will make the content underneath the wrapper unreachable, but since it’s a modal this would be desired anyway, I suppose; so you could just use the wrapper as an overlay with a height of 100% as well, and maybe a darker semi-transparent background colour.

PaulOB · September 4, 2016, 8:16am

Something like this perhaps.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
	margin:0;
	padding:0;
}
.bodytext {
	position:relative;
}
html,body{height:100%}
#modal {
	display: table;
	height: 100%;
	width: 100%;
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:rgba(0,0,0,0.4);
}
#modal_inside {
	display: table-cell;
	vertical-align: middle;
}
.model_content {
	width: 300px;
	padding: 5px;
	margin: 7px auto;
	text-align: center;
}
#bluebox {
	background: aqua;
}
.showcart {
	background:red;
	width:100px;
	height:30px;
	color:#FFFFFF;
	border:0;
}
</style>
</head>
<body>
<div class="bodytext">This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here  This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here 
  <!--modal starts-->
  <div id="modal">
    <div id="modal_inside">
      <div class="model_content">
        <p id="bluebox">model content</p>
      </div>
    </div>
  </div>
  <!-- modal ends--> 
</div>
</body>
</html>

vinpkl · September 4, 2016, 8:25am

Thanks PaulOB

its works perfect

vineet

vinpkl · September 4, 2016, 8:39am

hi m3g4p0p

i had to change your above css to make it work like below

.wrapper {
    position: fixed;
    width: 100%;
    height:100%;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

#modal{
    display: table;
    width: auto;
    margin: 0 auto;
    height:100%;
    width:100%;
}

thanks

its working in center now

vineet

Experience_Matters · September 5, 2016, 9:09pm

If you don’t want to give dimensions to the modal block.

This also works nicely (doesn’t work in IE8 or lower).

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
	margin:0;
	padding:0;
}
.bodytext {
	position:relative;
}
html,body{height:100%}
#modal {
	height: 100%;
	width: 100%;
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:rgba(0,0,0,0.4);
}
#modal_inside {
	display: block;
        position: absolute;
        top: 50%.
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
}
</style>
</head>
<body>
<div class="bodytext">This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here  This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here This is body text of the document written here 
  <!--modal starts-->
  <div id="modal">
    <div id="modal_inside">
      <div class="model_content">
        <p id="bluebox">model content</p>
      </div>
    </div>
  </div>
  <!-- modal ends--> 
</div>
</body>
</html>

position absolute, takes the % of the dimensions of the parent element
transform: translate(); takes the % of the dimensions of the element itself.

I prefer using this, as it leads to less code when you have to scale the centered block when you make it responsive.
And if it contains text, the height also tends to change a lot depending on what language is put in it.

system · December 6, 2016, 4:09am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Centring a pop-up/modal HTML & CSS	3	753	July 1, 2020
Pop up window alignment problem JavaScript	1	1884	July 27, 2010
How to make popup modal scrollable on smaller screens HTML & CSS	9	26570	December 17, 2020
Simple css jquery modal HTML & CSS jquery	41	6448	April 24, 2021
Need Modal Popup to Center HTML & CSS	2	542	November 30, 2016

Position modal popup in center of screen with display table above body text

Related topics