I have designed a simple modal box in HTML.
Now in the modal I tried creating 2 sections horizontally using a hr tag.It worked fine and sections were created.
After this I tried putting a text area in the upper section. I was able to successfully place the text area. However placing the text area there caused the seperator (hr tag line) to be moved further down.
However when I put the text area part of the code in a div element and provided a width and height it worked fine.
Please can anyone explain me the reason why it was not working without a div element.
Also if could be made to work without a DIV tag , how is that possible ?
HTML Code :
<html>
<link href="showTutorial.css" rel="stylesheet"/>
<body >
<script src="showTutorial.js" type="text/......script"></script>
<div id="left1">
<ol>
<li>
<a href="#">What is ....</li>
<li>
<a href="#">What </li>
<li>
<a href="#">Strings</li>
</a>
<li>
<a href="#">Arrays</li>
</a>
<li>
<a href="#">Threads</li>
</a>
<li>
<a href="#">What is ......</li>
<li>
<a href="#">What is ......</li>
<li>
<a href="#">Strings</li>
</a>
<li>
<a href="#">Arrays</li>
</a>
<li>
<a href="#">Threads</li>
</a>
</ol>
</div>
<div id="centre1">
<h1 id="centre1Label1">What is .....</h1>
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">x</span>
<div id="upperModal">
<textarea id="textAreaId" rows="14">Hello</textarea>
</div>
<hr id="seperator"/>
<div>
<p>Some text in below.</p>
</div>
</div>
</div>
</div>
<div id="right1" >
</div>
</body>
</html>
JavaScript Code :
var modal,btn,span;
window.onload=function(){// Get the modal
modal = document.getElementById('myModal');
// Get the button that opens the modal
btn = document.getElementById('myBtn');
// Get the <span> element that closes the modal
span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display="none";
}
}
CSS code :
#left1 {
width:170px;
background:#EDD8B3;
float:left;
position:relative;
top:180px;
left:5px;
border: 3px solid grey;
font-size: 1.2em;
padding:0;
margin:0;
}
body
{
background-color:#EDD8B3;
margin:0;
padding:0;
}
#centre1 {
width:620px;
height:800px;
left:10px;
background:white;
float:left;
position:relative;
top:180px;
box-shadow: 3px 3px grey;
margin:0;
padding-right: 450px;
}
#right1 {
margin:0;
padding:0;
}
ol {
list-style-type:none;
background: #EDD8B3;
padding-top:2px;
margin-top:0.1px;
}
ol li {
border-bottom: 2px solid #f0f0f0;
display:list-item;
padding:5px;
margin-left:2px;
margin-right:0.2px;
margin-bottom:2px;
margin-top:10px;
}
ol li a {text-decoration:none;
color:#008080;
}
#centre1Label1{position:relative;left:480px;padding:0; margin-right:30px;}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 60px; /* Location of the box */
left: 0;
top: 0;
width: 1300px; /* Full width */
height: 1000px; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 1000px;
height:450px;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
#seperator{
margin-top:180px;
padding:0;
}
#textAreaId{
padding:0;
margin:0;
min-width:100%;
}
#upperModal{
height:50px;
}
