Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptとCSSを使用してモーダルポップアップを作成するにはどうすればよいですか？

モーダルポップアップを作成するということは、ボタンをクリックすると生成され、ユーザーがポップアップの外側をクリックすると閉じるダイアログボックスを追加することを意味します。

ヘッダーとテキストを含むポップアップは次のようになります。フッターを追加することもできます-

JavaScriptとCSSを使用してモーダルポップアップを作成するにはどうすればよいですか？

CSSとJavaScriptを使用してモーダルポップアップを作成するには、次のコードを実行してみてください-

例 

<!DOCTYPE html>
<html>
   <head>
      <style>
         .popup {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #F1F1F1;
            background-color: rgba(0,0,0,0.4);
            -webkit-animation-name: fadeIn;
            -webkit-animation-duration: 0.4s;
            animation-name: fadeIn;
            animation-duration: 0.4s
         }
         .popup-content {
            position: fixed;
            bottom: 0;
            background-color: #ffffff;
            width: 100%;
            -webkit-animation-name: slideIn;
            -webkit-animation-duration: 0.5s;
            animation-name: slideIn;
            animation-duration: 0.5s
         }
         .end {
            color: white;
            float: right;
            font-size: 15px;
            font-weight: bold;
         }
         .end:hover,
         .end:focus {
            color: #000;
            text-decoration: underline;
            cursor: pointer;
         }
         .popup-header {
            padding: 1px 10px;
            background-color: #8AC1E0;
            color: white;
         }
         .popup-body {padding: 1px 5px;}
         @-webkit-keyframes slideIn {
            from {bottom: -300px; opacity: 0}
            to {bottom: 0; opacity: 1}
         }
         @keyframes slideIn {
            from {bottom: -300px; opacity: 0}
            to {bottom: 0; opacity: 1}
         }
         @-webkit-keyframes fadeIn {
            from {opacity: 0}
            to {opacity: 1}
         }
         @keyframes fadeIn {
            from {opacity: 0}
            to {opacity: 1}
         }
      </style>
   </head>
   <body>
      <h2>Heading</h2>
      <button id="btn">Click for Popup</button>
      <div id="myModal" class="popup">
         <!-- Modal content -->
         <div class="popup-content">
            <div class="popup-header">
               <span class="end">×</span>
               <h2>Header</h2>
            </div>
            <div class="popup-body">
               <p>Demo Text</p>
            </div>
         </div>
      </div>
      <script>
         var popup = document.getElementById('myModal');
         var myBytton = document.getElementById("btn");
         var span = document.getElementsByClassName("end")[0];
         myBytton.onclick = function() {
            popup.style.display = "block";
         }
         span.onclick = function() {
            popup.style.display = "none";
         }
         window.onclick = function(event) {
            if (event.target == popup) {
               popup.style.display = "none";
            }
         }
      </script>
   </body>
</html>

  1. CSSとJavaScriptでアコーディオンを作成するにはどうすればよいですか？

    CSSとJavaScriptを使用してアコーディオンを作成するためのコードは、次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .demo {    background-color: #eee;    cursor: pointer;    paddi

  2. CSSとJavaScriptでポップアップチャットウィンドウを作成するにはどうすればよいですか？

    CSSとJavaScriptでポップアップチャットウィンドウを作成するためのコードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma, Gene