Popup HTML help


Joined
Jun 14, 2018
Messages
11
Reaction score
0
hi guys sorry to be a pain in the rear end but i'm having problems
with my popup, i click my button link and yes the form does come up
but my text is missing i mean it is there but i can't seem to color it

please have a look


<code>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* 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: 80%;
}

/* 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;
}
</style>
</head>
<body>



<!-- Trigger/Open The Modal -->
<button id="myBtn">Request A Tune</button>

<!-- The Modal -->
<div id="myModal" class="modal">

<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<center><!DOCTYPE html>
<html>
<body>



<form action="(e-mail address removed)" method="post" enctype="text/plain">
<form action="(e-mail address removed)" method="post" enctype="text/plain">
Artist Name:<br>
<input type="text" name="name"><br>
E-mail:<br>
<input type="text" name="mail"><br>
Comment:<br>
<input type="text" name="comment" size="50"><br><br>
<input type="submit" value="Dedicate It">
</form>

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

</div>

<script>
// 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";
}
}
</script></code>
 
Ad

Advertisements

Joined
Nov 27, 2019
Messages
127
Reaction score
19
I am trying to help you, so please don't get mad at what I am about to say. It's not <code>, it's
Code:
I would use a TEXTAREA instead of an INPUT for comments.
Your size=50 makes the INPUT go beyond the modal on galaxy cells.
I would not set the modal width to 100%. It looks really amateurish. Make the width just wide enough to hold it's components and use vw's for the dimensions, then center the modal instead of
top: 0;left: 0;

this should color things for you
[code]
.modal-content form{
    background-color: blue;
    color: yellow;
}
.modal-content form input{
    background-color: green;
    color: pink;
}
 
Joined
Jun 14, 2018
Messages
11
Reaction score
0
ok sorry i'm listening now aha.

so you've recently meantioned textarea instead of input which i have changed

<input type="text" name="mail"><br>
Comment:<br>
<textarea="text" name="comment" size="30"><br><br>

i have changed my size=50 which you meantioned is to big

but were's the dimensions, also where did you spot the 6 to 8 heads and bodys
so i can correct this?
 
Joined
Jun 14, 2018
Messages
11
Reaction score
0
ok i have downloaded visualstudio its looking great, but i have a problem
i'm am hunting for it but cant find

<head>
<title>hottunez</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>



<div class="jumbotron text-center" style="margin-bottom:0">
<html>
<head>





<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">

</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Schedule</a></li>
<li><a href="#">DJS</a></li>
<li><a href="#">Chat</a></li>
<li><a href="#">Artist Music Submission</a></li>
</ul>
</div>
</nav>


</div>

</body>
</html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
display: center; /* Hidden by default */
position: middle; /* Stay in place */
z-index: 1; /* Sit on top */
left: 5;
top: 4;
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: center;
bottom: 0;
background-color: #fefefe;
width: 50%;
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s
}

/* The Close Button */
.close {
color: white;
float: center;
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>
 
Ad

Advertisements

Joined
Nov 27, 2019
Messages
127
Reaction score
19
CTRL-F for find CTRL-R for find and replace. There is also an arrow left side of find box to turn it to replace box. Either type what your looking for or highlight what you want. The box also show you how many there are. RTM
 
Ad

Advertisements


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top