2017-08-05 8 views

答えて

2

あなたが望むものを達成するための多くの方法があります。例えば、以下のようないくつかのWebフレームワーク/ライブラリに入ることができます。 Vue.jsまたはreact.js

あなただけの私はあなたがこれらのressourcesをチェックアウトをお勧めプレーンHTML + CSSを経由して、それを実行したい場合:

私はスクリーンショット下のようなダイアログボックスを表示する方法を知りたいです。あなたの箱のために

Creating a modal box

それは別のWebサイトに画像やリンクを含んでいます。

追加画像:リンクについてHere's how to add them!

:あなたは私にいくつかの時間を与える場合、私もあなたのための一例をファッションができClick me!

コミュニティへようこそ&あなたの旅に幸運を祈る!

1

これを行うには多くの方法があります(手作りの、または既製の既製のソリューション)。

しかし、あなたがつもり、具体的な解決策なしに自分でそれを行う場合は、簡単にそれを作るためにいくつかのステップがあります。

  • は、すべての要素を含めて、ダイアログボックス、のためのHTMLコードを作成します。
  • ダイアログボックスのCSSを作成します。ダイアログボックスはデフォルトで非表示になります。
  • ダイアログボックスの動作を管理できるようにJavaScriptコードを作成します。

たとえば、私たちは、このダイアログボックスのHTMLがあります。

<!-- When u click on this element dialog box appears --> 
    <a id="open-dialog" href="#">Show dialog</a> 
<!-- Dialog box --> 
    <div id="dialog-box"> 
    <!-- Dialog box close button --> 
    <span id="close-dialog">x</span> 
    <!-- Dialog box content --> 
    <p>Hello im dialog box</p> 
    </div> 

をそして、我々は我々のダイアログボックスのCSSコードを持っている:

/* Dialog box container styles */  
#dialog-box{ 
     display:none;/* Dialog box hidden by deafault */ 
     position:absolute; 
     border:1px solid #333; 
     padding:10px; 
     width:200px; height:100px; 
     top:30%; left:30%; 
    } 

/* Dialog box close button styles */ 
    #close-dialog{ 
     display:inline-block; 
     font-weight:bold; 
     float:right; 
     margin-right:10px; 
     font-size:18px; 
     width:10px; height:10px; 
     cursor:pointer; 
    } 

次の我々が表示されますJavaScriptコードを記述することができダイアログボックスを非表示にする(https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.jsからjQueryライブラリを使用):

$(function(){ 

/* Bind onlick event handler for element with "open-dialog" id - our 
    link element to open dialog box */ 
$('#open-dialog').on('click', function(e){ 
    e.preventDefault(); 
    $('#dialog-box').show(); 
}); 

/* Bind onlick event handler for element with "close-dialog" id - our 
    close dialog box button */ 
$('#dialog-box').on('click', '#close-dialog', function(e){ 
    e.preventDefault(); 
    $('#dialog-box').hide(); 
}); 

}); 

ここに実例を見ることができますhttps://jsfiddle.net/qeenegmn/

関連する問題