Question

我对网络开发完全陌生。我有一个索引页面和一个登录页面。我想将索引页面中的登录作为模态登录页面。请问我该怎么做。

这是代码

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Ascend &mdash; be loved</title>
</head>

<body>


<div id="mypage">
<header id="myheader" role="banner">
    <div class="container">
        <div class="header-inner">
            <h1><a href="#">Ascend<span>.</span></a></h1>
            <nav role="navigation">
                <ul>
                    <li><a href="products.html">Products</a></li>
                    <li><a href="services.html">Services</a></li>
                    <li><a href="pricing.html">Pricing</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="contact.html">Contact</a></li>



                    <!-- i want to inert the modal login button here-->

                </ul>
            </nav>
        </div>
    </div>
</header>
<div>

以下是我要转换为模态表单的示例表单。调用表单的按钮应放在标题上，例如“在这里登录” 并且此表格应放在html5代码中，这样当我点击“在此登录”按钮时，将出现下面的模态表格。

<a href="#openModal">Open Modal</a>

<div id="openModal" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Modal Box</h2>
    <p>This is a sample modal box that can be created using the powers of 
CSS3.</p>
    <p>You could do a lot of things here like have a pop-up ad that shows 
when your website loads, or create a login/register form for users.</p>
</div>
</div>

感谢

Answer 1

您可以将模态放在任何地方。您可以在标题结束标记下方编写代码，并为其指定一个唯一ID，其值为z-index属性为负值。它会让你模态出现在一切的前面。

您可以阅读有关z-index here的更多信息。

在html5中放置模态登录的位置

1 个答案: