Question

问题

我想要覆盖整个页面的login.php屏幕和addphoto.php屏幕。所以我做的是：

 .login-screen, .form-screen {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    z-index: 1;
    height: 100vh;
    width: 100vw;
}

但是在login.php屏幕上，底部仍然有一条白色的条纹。在addphoto.php屏幕上，我无法向下滚动（b / c表单元素长于屏幕高度。See animation of problem here

如果有人可以帮助我，让这些屏幕按照我希望的方式行事那就太棒了！

注意

我已经看过this post了。但是，虽然它可以使div可滚动，但我仍然可以滚动浏览addphoto.php或login.php页面并查看下面的屏幕。 See animation here

代码

photos.php

<?php
    $name = "Photos";
    require_once('config.php');

    $sql = 'SELECT * FROM Image;';
    require_once("nav.php");
    require_once("php/header.php");
    require_once("php/grid.php");
    require_once("php/footer.php");
    require_once('login.php');
    require_once('addphoto.php');
?>

的config.php

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        <?php echo "$name" ?>
    </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--Styling-->
    <link type="text/css" rel="stylesheet" href="css/main.css" />
    <link type="text/css" rel="stylesheet" href="css/grid.css" />
    <link type="text/css" rel="stylesheet" href="css/form.css" />
<?php
    $nameLowercased = strtolower($name);
    echo "<link type='text/css' rel='stylesheet' href='css/$nameLowercased.css'/>";

?>
    <!--Custom icon-->
    <link href="https://file.myfontastic.com/fNQ9F99nd88vQm96ESUaLW/icons.css" rel="stylesheet" />
    <!-- jQuery library -->
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <!--Javascript-->
    <script type="text/javascript" src="js/main.js"></script>
</head>

grid.php

<div class="grid">
    <?php
        while ($row = $result->fetch_assoc()) {
           $printGridFor[$name]($row);
        }
    ?>
</div>
<button class="add"><span class="icon-plus"></span></button>

的login.php

<div class="form-screen">
    <button class="close" id="closeLogin"><span class="icon-x"></span></button>
    <form action="" method="post">
        <div class="login-wrapper">
            <input type="text" name="username" placeholder="Username">
            <input type="text" name="password" placeholder="Password">
            <button type="submit" class="field submit" name="submit" value="submit">Submit</button>
        </div>
    </form>
</div>

addphoto.php

<div class="form-screen">
    <button class="close" id="closeForm"><span class="icon-x"></span></button>
    <form method="post" enctype="multipart/form-data">
        <div class="form-wrapper">
            <h1>Add Photo</h1>
            <div class="box">
                <input type="file" name="file[]" id="file" class="inputfile" data-multiple-caption="{count} files selected" multiple />
                <label for="file">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
                        <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z" /> </svg> <span>Choose a file&hellip;</span> </label>
            </div>
            <select name="image-album" class="col">
                <option value="" selected>Add to album</option>
                <option value="1">Beauty Gurus</option>
                <option value="2">Cute Food</option>
            </select>
            <input type="text" name="photo-title" placeholder="Title" required>
            <input type="text" name="date-created" class="date" placeholder="Date Created" required>
            <input type="text" name="caption" placeholder="Caption">
            <input type="text" name="credt" placeholder="Credit*">
            <button type="submit" class="field submit" name="submit" value="submit">Upload Photo</button>
        </div>
    </form>
</div>

form.css

/*General styling*/

button:focus,
.inputfile:focus + label,
select:focus,
input:focus {
    outline: white auto 5px;
}

/*Login styling*/
.login-screen, .form-screen {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    z-index: 1;
    height: 100vh;
    width: 100vw;
    background: #3472FF;
    color: white;
    font-family: 'Roboto', 'sans-serif';
}

.close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2em;
    color: white;
}

.close:hover {
    color: #d8d8d8;
}

.form-wrapper {
    padding-top: 5%;
    padding-bottom: 5%;
}

.form-wrapper h1 {
    text-transform: uppercase;
    font-weight: 500;
    text-align: center;
    font-size: 3em;
}

/*Login styling*/
.login-wrapper {
    margin-top: 15%;
    margin-bottom: 15%;
}


/*Form input elemnts styling*/

input[type="text"],
.submit,
select {
    display: block;
    margin: 0 auto;
}

input[type="text"] {
    cursor: text;
}

select {
    cursor: pointer;
    margin-bottom: 40px;
/*
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
*/
}

input[type="text"],
select {
    border: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: #3472FF;
    font-size: 2em;
    padding: 20px 20px 20px 20px;
    margin-bottom: 40px;
    width: 60%;
}

input[type="text"]::-webkit-input-placeholder {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: #3472FF;
    font-size: 1em;
}

input[type="text"]:-ms-input-placeholder {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #3472FF;
    font-size: 1em;
}

input[type="text"]:-moz-placeholder {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #3472FF;
    font-size: 1em;
}

input[type="text"]::-moz-placeholder {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #3472FF;
    font-size: 1em;
}

.submit:hover {
    background-color: #d8d8d8;
}

.submit {
    background-color: white;
    color: #3472FF;
    font-size: 2em;
    text-transform: uppercase;
    padding: 20px 20px 20px 20px;
    border-radius: 7px;
    border: none;
}


/*File upload styling*/

.box {
    text-align: center;
    margin-bottom: 35px;
}

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.inputfile + label {
    max-width: 80%;
    font-size: 1.4em;
    font-weight: 500;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 20px 20px 20px 20px;
    border-radius: 5px;
}

.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    /* 4px */
    margin-right: 0.25em;
    /* 4px */
}

.inputfile + label {
    color: #3472FF;
    background-color: white;
}

.inputfile:focus + label,
.inputfile.has-focus + label,
.inputfile + label:hover {
    background-color: #d8d8d8;
}


/*Datepicker styling*/

/*Set datepicker’s width, position it to the center and add drop shadow*/
.ui-datepicker {
    width: auto;
    height: auto;
    margin: 5px auto 0;
    font: .7em 'Roboto', sans-serif;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .10);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .10);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .10);
    background-color: #fafafb;
}

/*Remove the default underline decoration from every anchor tag*/
.ui-datepicker a {
    text-decoration: none;
}

/*add 100% width for the table, so it will have the same maximum width as the wrapper above (i.e. widith: auto)*/
.ui-datepicker table {
    width: 100%;
}

/*style header*/
.ui-datepicker-header {
    text-transform: uppercase;
    background-color: #fafafb;
    font-size: 1.2em;
    color: #555555;
    font-weight: bold;
    line-height: 30px;
}

/*center the Month position.*/
.ui-datepicker-title {
    text-align: center;
}

/*Set up arrows*/
.ui-datepicker-prev,
.ui-datepicker-next {
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    background-repeat: no-repeat;
    line-height: 600%;
    overflow: hidden;
}

/*Replace the Next and Prev text with the sprite arrow images and adjust arrow position*/
.ui-datepicker-prev {
    float: left;
    background-position: center 10px;
    background-image: url('../images/arrow_prev.png');
    /*Images created by me (Monica Ong)*/
}

.ui-datepicker-next {
    float: right;
    background-position: center 10px;
    background-image: url('../images/arrow_next.png')
}

/*Set colors of day names*/
.ui-datepicker thead {
    background-color: #efefef;
}

.ui-datepicker th {
    text-transform: uppercase;
    font-size: .7em;
    padding: 5px 0;
    color: #666666;
}

/*Style dates*/
.ui-datepicker tbody td {
    padding: 0;
}

.ui-datepicker tbody td {
    padding: 0;
}

/*Style default,  hover, and active state*/
.ui-datepicker td span,
.ui-datepicker td a {
    display: inline-block;
    font-weight: bold;
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #666666;
}

.ui-datepicker-calendar .ui-state-default {
    background: #ededed;
}

.ui-datepicker-unselectable .ui-state-default {
    background: #f4f4f4;
    color: #949496;
}

.ui-datepicker-calendar .ui-state-hover {
    background: #f7f7f7;
}

.ui-datepicker-calendar .ui-state-active {
    background: #666666;
    color: #efefef;
    position: relative;
    margin: -1px;
}

.ui-datepicker-calendar td:first-child .ui-state-active {
    width: 29px;
    margin-left: 0;
}

.ui-datepicker-calendar td:last-child .ui-state-active {
    width: 29px;
    margin-right: 0;
}

.ui-datepicker-calendar tr:last-child .ui-state-active {
    height: 29px;
    margin-bottom: 0;
}

main.js

$(document).ready(function () {
    //Show/Hide edit & delete buttons
    $(".grid").on("mouseenter", ".grid-square", function () {
        $(this).find(".delete").fadeIn(100);
        $(this).find(".edit").fadeIn(100);
    });
    $(".grid").on("mouseleave", ".grid-square", function () {
        $(this).find(".delete").fadeOut(100);
        $(this).find(".edit").fadeOut(100);
    });

    //Show/Hide nav bar
    $(".closeNavBtn").on("click", function () {
        $(".sidenav").css("width", "0px");
    });
    $(".menu").on("click", function () {
        $(".sidenav").css("width", "250px");
    });
    $(window).scroll(function (event) {
        if ($(".sidenav").width() === 250) {
            $(".sidenav").css("width", "0vw");
        }
    });

    //Show/Hide login screen
    $(".login").on("click", function () {
        $(".login-screen").fadeIn(300);
    });
    $("#closeLogin").on("click", function () {
        $(".login-screen").fadeOut(300);
    });

    //Show/Hide form screen
    $(".add").on("click", function(){
      $(".form-screen").fadeIn(300);
    });
    $("#closeForm").on("click", function(){
      $(".form-screen").fadeOut(300);
    });
    //Customize input label based on file
    var input = document.querySelector('.inputfile');
    customizeInputLabel(input);

    //Datepicker
    $(".date").datepicker({
        inline: true
        , showOtherMonths: true
        , dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    });
});
//customizeInputLabel changes label when select file
function customizeInputLabel(input) {
    var label = input.nextElementSibling
        , labelVal = label.innerHTML;
    input.addEventListener('change', function (e) {
        var fileName = '';
        if (this.files && this.files.length > 1) fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length);
        else fileName = e.target.value.split('\\').pop();
        if (fileName) label.querySelector('span').innerHTML = fileName;
        else label.innerHTML = labelVal;
    })
}

Answer 1

尝试：

MessagingCenter

在 form.css

中

使 adphoto.php 可滚动：将父元素更改为body{ height: 100%; width: 100%; } .login-screen, .form-screen { position: fixed; top: 0; left: 0; display: none; z-index: 1; height: 100%; width: 100%; background: #3472FF; color: white; font-family: 'Roboto', 'sans-serif'; } 或将min-height:100%;添加到其css。

如何让div覆盖整个屏幕（也可以滚动）？

问题

注意

代码

1 个答案: