Popup HTML help

Discussion in 'HTML and CSS' started by strawbs, Nov 28, 2019.

  1. strawbs

    strawbs

    Joined:
    Jun 14, 2018
    Messages:
    8
    Likes Received:
    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="hottunezradio@gmail.com" method="post" enctype="text/plain">
    <form action="hottunezradio@gmail.com" 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>
     
    strawbs, Nov 28, 2019
    #1
    1. Advertisements

  2. strawbs

    sunfighter

    Joined:
    Nov 27, 2019
    Messages:
    13
    Likes Received:
    1
    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 (Text):

    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;
    }
     
     
    sunfighter, Nov 28, 2019
    #2
    1. Advertisements

  3. strawbs

    strawbs

    Joined:
    Jun 14, 2018
    Messages:
    8
    Likes Received:
    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?
     
    strawbs, Nov 28, 2019
    #3
  4. strawbs

    sunfighter

    Joined:
    Nov 27, 2019
    Messages:
    13
    Likes Received:
    1
    sunfighter, Nov 28, 2019
    #4
  5. strawbs

    strawbs

    Joined:
    Jun 14, 2018
    Messages:
    8
    Likes Received:
    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>
     
    strawbs, Nov 29, 2019
    #5
  6. strawbs

    sunfighter

    Joined:
    Nov 27, 2019
    Messages:
    13
    Likes Received:
    1
    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
     
    sunfighter, Nov 30, 2019
    #6
  7. strawbs

    Flow495

    Joined:
    Dec 1, 2019
    Messages:
    3
    Likes Received:
    0
    Can i get some help on this Project, it says Develop a Triad class that represents a trinity of numbers and contains a method for equality checking two triads. Develop child class Date with fields that represent the year, month and day and also contains a full set of methods for equality checking two dates.
     
    Flow495, Dec 1, 2019
    #7
    1. 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 (here). After that, you can post your question and our members will help you out.