My JavaScript is not working, when I put it in asps webpage inside a script tag. Code is in the images and in code as well.
It is actually a model box to open images like lightBox/fancyBox but it only open the model box for 1 second, but it works in normal html page
<%# Page Language="C#" AutoEventWireup="true" CodeFile="img-model.aspx.cs" >Inherits="webpages_img_model" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>model box</title>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
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: 60%;
height:auto;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.clear {
clear:both;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-content .p1 {
float:left;
border-right:1px;
width:50%;
}
.modal-content .p2 {
float:right;
width:50%;
}
#img {
position:relative;
width:400px;
height:400px;
}
#img #mm{
position:absolute;
top:0px;
right:0px;
z-index: 16;
}
#img img{
width:100%;
height:auto;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<h2>Modal Example</h2>
<div id="img">
<a href="">
<img src="../images/1pic.jpg" width="400px" height="400px" />
<span id="mm"><button id="d">MM</button> </span>
</a>
</div>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="p1" >
<img src="../images/1pic.jpg" height="100%" width="80%" > />
</div>
<div class="p2">
<p>Some text in the Modal..</p> <br />
<p>Some text in the Modal..</p> <br />
<p>Some text ithe Modal..</p> <br />
<p>Some text in the Modal..</p> <br />
<input id="Button1" type="button" value="button" />
</div>
<div class="clear"></div>
</div>
</div>
<script type="text/javascript">
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function () {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function () {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
$window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</form>
</body>
</html>
As I commented your issue when the user clicks on the Open Modal button it submits the form which means essentially reloaded the page. What you need to do is return false on your btn.onclick = function () function. For simplicity I have posted all the code:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="img-model.aspx.cs" >Inherits="webpages_img_model" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>model box</title>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
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: 60%;
height:auto;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.clear {
clear:both;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-content .p1 {
float:left;
border-right:1px;
width:50%;
}
.modal-content .p2 {
float:right;
width:50%;
}
#img {
position:relative;
width:400px;
height:400px;
}
#img #mm{
position:absolute;
top:0px;
right:0px;
z-index: 16;
}
#img img{
width:100%;
height:auto;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<h2>Modal Example</h2>
<div id="img">
<!-- added # -->
<a href="#">
<!-- I would set the dimensions width and height in CSS -->
<img src="../images/1pic.jpg" width="400" height="400" />
<span id="mm">
<button id="d">MM</button> </span>
</a>
</div>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="p1" >
<img src="../images/1pic.jpg" height="100" width="80" />
</div>
<div class="p2">
<p>Some text in the Modal..</p> <br />
<p>Some text in the Modal..</p> <br />
<p>Some text ithe Modal..</p> <br />
<p>Some text in the Modal..</p> <br />
<input id="Button1" type="button" value="button" />
</div>
<div class="clear">
</div>
</div>
</div>
<script type="text/javascript">
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function () {
modal.style.display = "block";
/* added to prevent the page to submitting */
return false;
}
// When the user clicks on <span> (x), close the modal
span.onclick = function () {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
/* got rid of the $window and just replaced it with window */
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</form>
</body>
</html>
I made some other changes as well to the html and javascript, see inline comments
Related
I'm a JS rookie, so be patient with me. I just created a js popup using this code https://www.w3schools.com/howto/howto_js_popup.asp and now I am attempting to add a simple close button to the top right corner to direct users to. I looked at some of the other close button threads and none of them seemed like they would integrate into my js code.
i Well searched "js close button" on the site which brought up several threads but none of them seemed to have an easy addition to the js script (Im assuming thats where the code should go). Again. Newbie.
Add a css class and simply display and hide it on button click
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: lightBlue;
background-color: grey;
}
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
}
.close {
color: black;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-body {padding: 2px 16px;}
<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
Why can I not use the class myBtn for several overlays ? It is a class it must work or not? I want to use the overlay function for several buttons is it in some way possible ? I know the ids can not been used for several times thats why I changes it to classes but it still does not work.
I have the example from w3schools below.
<!DOCTYPE html>
<html>
<head>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
-webkit-animation-name: fadeIn; /* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}
/* Modal Content */
.modal-content {
position: fixed;
bottom: 0;
background-color: #fefefe;
width: 100%;
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
/* Add Animation */
#-webkit-keyframes slideIn {
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}
#keyframes slideIn {
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}
#-webkit-keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}
#keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}
</style>
</head>
<body>
<h2>Bottom Modal</h2>
<!-- Trigger/Open The Modal -->
<button class="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<h2>2 Bottom Modal</h2>
<!-- Trigger/Open The Modal -->
<button class="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementsByClassName("myBtn")[0];
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
U are using 2 times the following id.
id="myModal"
Change it to class and also the javascript part so it looks like this:
var modal = document.getElementByClassName('myModal');
As u said, u can only use once an id.
My HTML file has a number of icon images (all images have the same class attribute) and the same number of HTML snippets that represent a modal/popup (they also have the same class name). The icons and the popup snippets always come in pairs and are generated dynamically which means the exact number of pairs is unknown. My HTML code looks like this -
<img src="/images/info_icon.gif" class="tooltip_icon" alt="sample">
<div class="tooltip_modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h5>Tooltip</h5>
</div>
<div class="modal-body">
<p>Sample text 1</p>
</div>
</div>
</div>
<img src="/images/info_icon.gif" class="tooltip_icon" alt="sample">
<div class="tooltip_modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h5>Tooltip</h5>
</div>
<div class="modal-body">
<p>Sample text 2</p>
</div>
</div>
</div>
<img src="/images/info_icon.gif" class="tooltip_icon" alt="sample">
<div class="tooltip_modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h5>Tooltip</h5>
</div>
<div class="modal-body">
<p>Some text 3</p>
</div>
</div>
</div>
Please note that the text for each modal is different.
I want to create a logic in JavaScript where clicking on the icon opens the corresponding model. For example - Clicking the first icon should show "Sample text 1" , clicking the second icon should show "sample text 2".
Below is my JS code which (obviously) doesn't work:
var btn = document.getElementsByClassName("tooltip_icon");
var modal = document.getElementsByClassName("tooltip_modal");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
function displayModal(k) {
modal[k].style.display = "block";
}
// When the user clicks on <span> (x), close the modal
function hideModal(k) {
modal[k].style.display = "none";
}
for (var i=0,j=0; i<btn.length,j<modal.length; i++,j++) {
btn[i].onclick = displayModal(j);
span.onclick = hideModal(j);
window.onclick = function(event) {
if (event.target == modal[j]) {
hideModal(j);
}
}
}
What I am trying to do here is loop through all icons and modals and for every icon[i] I am trying to call modal[j].
Jsfiddle code - https://jsfiddle.net/2orwct27/
Please help!
Thanks in advance
Okay,
there are several problems in your code. I rewrote the whole code so you get an idea what was wrong in your code and how your solution may look like.
Keep in mind, what I wrote uses language features which not all browsers support. In modern browsers however it will run fine.
function openWindow(modal) {
modal.style.display = 'block';
setTimeout(() => { document.addEventListener('click', closeModal); });
}
function closeWindow(modal) {
modal.style.display = 'none';
setTimeout(() => { document.removeEventListener('click', closeModal); });
}
function closeModal(e) {
const modal = getModalRoot(e.target);
if (modal) return;
[].forEach.call(document.querySelectorAll('.tooltip_modal'), closeWindow);
}
function getModalRoot(element) {
if (!element || !element.classList) return null;
if (element.classList.contains('modal-content')) return element;
return getModalRoot(element.parentNode);
}
[].forEach.call(document.querySelectorAll('.tooltip_icon'), (x, i) => {
x.id = `opener${i}`;
const modal = x.querySelector(`#${x.id} ~ .tooltip_modal`);
x.addEventListener('click', () => { openWindow(modal); });
modal.querySelector('.close').addEventListener('click', () => { closeWindow(modal); });
});
/* The Modal (background) */
.tooltip_modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #425563;
border-bottom: 4px solid #ffd100;
color: white;
}
.modal-body {padding: 10px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
/* Tooltip icon*/
.tooltip_icon
{
padding-bottom: 4px;
padding-left: 2px;
}
<img src="/images/info_icon.gif" class="tooltip_icon" alt="sample">
<div class="tooltip_modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h5>Tooltip</h5>
</div>
<div class="modal-body">
<p>Sample text one</p>
</div>
</div>
</div>
<img src="/images/info_icon.gif" class="tooltip_icon" alt="sample">
<div class="tooltip_modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h5>Tooltip</h5>
</div>
<div class="modal-body">
<p>Sample text 2</p>
</div>
</div>
</div>
<img src="/images/info_icon.gif" class="tooltip_icon" alt="sample">
<div class="tooltip_modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h5>Tooltip</h5>
</div>
<div class="modal-body">
<p>Some text 3</p>
</div>
</div>
</div>
First of all I didn't change any HTML or CSS.
What's different
Instead of looping thru all images and modal-elements and change there html, you could add an EventListener for the images and each close-element.
For the functions to show and hide the modal now it get's the modal itself instead it's index.
In your code you check on click if the click target equals the model. If so it should close it. But in the comment in your code you wan't it the other way around. Because I guess this is the natural behavior this is the way it's implemented in my snipped.
I want to be able to keep the data that the user decided in the checkbox of the modal and send it with the checkbox decision outisde of the modal without leaving the page or reloading.
If the user decides to check the checkbox within the modal how do I keep that data when I press continue to then wait for the submit button to send tha values of all the checkboxes.
var btn = document.getElementById("myBtn");
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {
padding: 2px 16px;
}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
<input type="checkbox" name="option" />
<input type="submit" value="continue" />
</div>
</div>
</div>
<div>
<input type="checkbox" name="value" />
<input type="submit" value="Send" />
</div>
Do not think of a modal as an entity separate from your page. A modal is just a normal div on your page, but it is positioned centered and overtop of other things. But it's just a regular div and you can read the values of elements in the modal at any time, even when it's invisible.
The values in the modal's checkbox are still available, just as they would be if they were in a different div. If your form is in the modal, then they are still part of the form. If the form is outside the modal, then you want to use javascript/jQuery at any time to read that checkbox and influence your form.
Here is an example where the form is outside the modal, and javascript updates the value of a form field when the modal is closed.
$('#myModal').modal('hide');
$('button').click(function(){
$('#myModal').modal('show');
});
$('#myCB').change(function(){
$('form input[name=inFormCB]').val( $(this).prop('checked') );
});
form{width:100%;padding:30px;background:wheat;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<p>INSTRUCTIONS: Open modal. Check/Uncheck the checkbox. Close modal. Observe result.</p>
<button>Open Modal</button>
<form>
Value of checkbox myCB:<br>
<input type="text" name="inFormCB" />
</form>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
<input id="myCB" type="checkbox" /> Got It
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
you must make a css of that text Option : to Focus
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;
}
You have:
#seperator {
margin-top: 180px;
padding: 0;
}
That margin push hr down when you don`t have the 50px height of #upperModal.
I am not entirely clear on what you are asking however I have ported your code to JsFiddle ( https://jsfiddle.net/pscott_au/5wLassmw/ )
I cleaned up some of your mismatched hrefs and was able to get the 2 textareas without any problem .. https://jsfiddle.net/pscott_au/5wLassmw/7/
can you clarify what you are asking?
<!-- 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"/>
<p>Some text in below.</p>
<textarea id="textAreaId" rows=14>Hello</textarea>
</div>