网页上方的表格,是否带有div显示?

时间:2019-03-05 08:50:28

标签: html forms web display

我想在整个网站上方创建一个注册表。就像我按下注册按钮时一样,将div显示从无设置为阻止,首先创建。它包括表格。但是,当我这样做时,某些要素便会达到顶峰。 我该如何纠正?

代码如下:

<body>
<div class="regisztraciosAblak" id="editorAblak">
    <button onclick="regisztacioAblakBezar()" style="float: right; margin-right: 30px; margin-top: 30px;" id="logout">Bezárás</button>
    <form method="post" class="registerform" style="margin-top:150px;">
        <font size="5px">Add meg az alábbi adatokat:</font><br><br>
        <input type="text" class="input" id="login" name="userName" placeholder="Felhasználónév" value="<?php if(isset($_POST['userName'])) echo $_POST['userName']; ?>"><br>
        <input type="password" class="input" id="login" name="userPass" placeholder="Jelszó"><br>
        <input type="password" class="input" id="login" name="userPass2" placeholder="Jelszó ismét"><br>
        <input type="text" class="input" name="userEmail" placeholder="E-mail" value="<?php if(isset($_POST['userEmail'])) echo $_POST['userEmail']; ?>"><br>
        <input type="checkbox" name="terms"> A fentebb írtakat megértettem és elfogadom<br>
        <button id="gomb-Register" type="submit" name="register-user" value="Regisztráció">Regisztráció</button><br>
    </form>
</div>
<div class="fejlec" align="center">
    <div class="fejlec-logo"><img src="../images/logo.png" width="100%" height="100%" align="middle"></div>
    <div class="fejlec-account">
        <button onclick="regisztacioAblak()" id="log-Reg"><i class="fas fa-user-plus"></i> Regisztráció</button>
    </div>
    <div class="fejlec-menu">
        <div class="navbar">
            <a class="active" href="#">Főoldal</a> 
            <a href="#">Rólunk</a> 
            <a href="#">Szerverről</a> 
            <a href="#">Egyéb</a>
        </div>
    </div>
</div>
<script>
    function regisztacioAblak() {
        var x = document.getElementById("editorAblak");
        x.style.display = "block";

    }
    function regisztacioAblakBezar() {
        var x = document.getElementById("editorAblak");
        x.style.display = "none";        
    }
</script>

1 个答案:

答案 0 :(得分:0)

如果我理解您的问题,那么您想在注册表格下方固定徽标的位置即可,您应该使用visibility: hidden而不是display: none

<script>
    function regisztacioAblak() {
        var x = document.getElementById("editorAblak");
        x.style.visibility = "visible";

    }
    function regisztacioAblakBezar() {
        var x = document.getElementById("editorAblak");
        x.style.visibility = "hidden";        
    }
</script>