2017-12-08 3 views
-2

私は全く新しいWeb開発です。私はインデックスページとログインページを持っています。私は、モーダルログインページとしてインデックスページにログインを組み込みたいです。私はそれをどうやってしてくださいね。ここここでhtml5でモーダルログインを入力する


はここでコード

<!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> 

おかげ

答えて

0

あなたはモーダル置くことができます。ヘッダーを閉じるタグのすぐ下にコードを記述し、それに負の値のz-indexプロパティを持つ一意のIDを付けることができます。それはすべての前にモーダルが現れるようにします。

z-index hereについて詳しく読むことができます。

+0

私は、インデックスページに配置したいモーダルフォームのサンプルコードを持つように質問を編集しました。私は正確に "Open Modal"を配置する場所を知りたいので、クリックするとモーダルページがポップアップ表示されます。ありがとう – chukwudi

関連する問題