CSS/Javascriptでポップアップを作成するには？</li> <li>問い合わせ</li> <li>デモ第一ラインで</li> </ol> <p></p> <ol> <li>サポート、それはサポートが表示されます：

私は行のリストを含むポップアップが作るしようとしています。 2行目にContactが表示され、3行目にDemoが表示されます。CSS/Javascriptでポップアップを作成するには？</li> <li>問い合わせ</li> <li>デモ第一ラインで</li> </ol> <p></p> <ol> <li>サポート、それはサポートが表示されます：

w3schoolsのリンクhttp://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popupに従うことで、1行のポップアップを作成することができましたが、複数行のポップアップを作成する方法がわかりません。

私が取得しようとしています何の絵表示は、ここに示されています：は

私はW3Schoolsのリンクから使用しているコードを以下に示します。

<!DOCTYPE html> <html> <style> /* Popup container - can be anything you want */ .popup { 
    position: relative; 
    display: inline-block; 
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; } 

/* The actual popup */ .popup .popuptext { 
    visibility: hidden; 
    width: 160px; 
    background-color: #555; 
    color: #fff; 
    text-align: center; 
    border-radius: 6px; 
    padding: 8px 0; 
    position: absolute; 
    z-index: 1; 
    bottom: 125%; 
    left: 50%; 
    margin-left: -80px; } 

/* Popup arrow */ .popup .popuptext::after { 
    content: ""; 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    margin-left: -5px; 
    border-width: 5px; 
    border-style: solid; 
    border-color: #555 transparent transparent transparent; } 

/* Toggle this class - hide and show the popup */ .popup .show { 
    visibility: visible; 
    -webkit-animation: fadeIn 1s; 
    animation: fadeIn 1s; } 

/* Add animation (fade in the popup) */ @-webkit-keyframes fadeIn { 
    from {opacity: 0;} 
    to {opacity: 1;} } 

@keyframes fadeIn { 
    from {opacity: 0;} 
    to {opacity:1 ;} } </style> <body style="text-align:center"> 

<h2>Popup</h2> 

<div class="popup" onclick="myFunction()">Click me to toggle the popup! <span class="popuptext" id="myPopup">Support</span> </div> 

<script> // When the user clicks on div, open the popup function myFunction() { 
    var popup = document.getElementById('myPopup'); 
    popup.classList.toggle('show'); } </script> 

</body> </html>

シンプルに代えて、ポップアップ、私はサポートを書いています。この時点で、私はここに示すように、一つだけの行を取得することができています：迅速な試みとして

出典

2016-10-24 Anonymous

何を試しましたか？あなたがやっている唯一のことは、隠された要素と表示された要素との間の切り替えです。したがって、トグルしている要素に追加するだけで済みます。順序付けられていないリストと 'span 'の代わりにリスト項目を使うことをお勧めします。 –

このようなやり方はたくさんあります。 – Aria

あなたは

の1-オープンyou mentioned link

2 - 変更htmlの欲しいものを設計するためにこれらのステップを実行しますコードへ：

<div class="popup" onclick="myFunction()">Click me to toggle the popup! 
<div class="popuptext" id="div"> 
    <div><span id="myPopup">Support</span><br/></div> 
    <div><span id="myPopup1">Contact</span><br/></div> 
    <div><span id="myPopup2">Demo</span><br/></div> 
</div> 
</div>

3-変化myFunction()コードブロックに：

var popup = document.getElementById('div'); 
popup.classList.toggle('show');

、4-エンドランでhead

.popup .popuptext div{ 
    text-align: center; 
    background:#ad4747; 
    border-radius: 6px; 
    width: 160px; 
    margin-top:2px; 
}

5にstyle要素にこのcssクラスを追加し、結果

を参照してくださいしかし、あなたはフロントでポップアップメニューを設計するにはいくつかの方法があります知っているように

しかし、私の解決策はあなたにいくつかの助けを与える素早い設計の希望です。

Additional helpful link

出典

2016-10-24 17:02:53 Aria

CSS/Javascriptでポップアップを作成するには？</li> <li>問い合わせ</li> <li>デモ第一ラインで</li> </ol> <p></p> <ol> <li>サポート、それはサポートが表示されます：

答えて

関連する問題