我可以隐藏 HTML/CSS/JS 模式，但显示时它位置不正确或具有背景颜色或边框

问题描述 投票：0回答：3

我假设我的 JS 和 HTML 是正确的。我把完整的代码放了进去，没有那么长，所以整个问题都可以看到。我复制了几个网站的CSS策略，但没有效果。我确实尝试过信誉良好的网站，例如 W3Schools 和 javascript.plainenglish.io。

我哪里错了？我不知道在 #modalContent 的 CSS 中放入什么，并且我认为在 #modalContainer 的 CSS 中放入的内容正在以我不理解的方式影响 #modalContent。我的问题是我的模式内容的文本被一直推到模式窗口的左上角，并且它没有自己的窗口来保存模式内容。否则，当模式取消隐藏时，背景会覆盖整个屏幕，并且看起来工作正常。

HTML

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Modal Popup</title>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta http-equiv="X-UA-Compatible" content="ie-edge" />
      <!-- <link rel="stylesheet" href="eric_meyer_reset_2.css" /> -->
      <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
      <div id="wrapper">
         <header>
            <h1>JavaScript Modal Popup</h1>
         </header>
         <div id="modalButtonDiv">
            <button id="modalButton">OpenModal</button>
         </div>
         <div id="modalContainer">
            <div id="modalContent">
               <span id="redX">&times;</span>
               <h1>Modal Title</h1>
               <p>Modal content goes here</p>
            </div>
         </div>
      </div>
      <script src="main.js"></script>
   </body>
</html>

CSS

@charset "utf-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
   display: block;
}

body {
   line-height: 1;
}

ol, ul {
   list-style: none;
}

blockquote, q {
   quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}

table {
   border-collapse: collapse;
   border-spacing: 0;
}

body {
   max-width:1680px;
   height: 100vh;
   background-color: rgb(211,211,211);
}

#wrapper {
   background-color: white;
   min-height: 100%;
   width: 90%;
   margin: 0 auto;
}

header > h1 {
   font-size: 2rem;
   font-weight: bold;
   padding: 0.67rem 0;
   text-align: center;
}

#modalButtonDiv {
   text-align: center;
}

#modalButton {
   background-color: rgb(28, 132, 56);
   font-weight: bold;
   width: 100px;
   padding: 0.5rem 0;
   line-height: 1.5rem;
   vertical-align: middle;
   border: 0;
   border-radius: 4px;
   margin: 15px 0;
}

#modalContainer {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   z-index: 1;
   background-color: rgba(0,0,0,0.4);
}

#modal-content {
   background-color: white;
   width: 450px;
   position: relative;
}

JavaScript

const openModalButton = document.getElementById("modalButton");
const closeRedX = document.getElementById("redX");
const modalContainer = document.getElementById("modalContainer");

let openModal = function () {
   modalContainer.style.display = "block"
};
openModalButton.addEventListener("click", openModal);

let closeModal = function (event) {
   if (event.target === modalContainer) {
      modalContainer.style.display = "none"
   }
};
window.addEventListener("click", closeModal);

let xCloseModal = function () {
   modalContainer.style.display = "none";
}
closeRedX.addEventListener("click", xCloseModal);

重申一下，我无法在 #modalContainer 和/或 #modalContent 中放入任何内容，以便我的模式窗口显示其中的文本，现在只有 #modalContainer 的背景正在工作，并且模式窗口也正在关闭。

javascript html css modal-dialog
3个回答
0
投票

威廉小号， 我已经像这样编辑了你的代码，

 const openModalButton = document.getElementById("modalButton");
        const closeRedX = document.getElementById("redX");
        const modalContainer = document.getElementById("modalContainer");

        let openModal = function() {
            modalContainer.style.display = "block";
        };
        openModalButton.addEventListener("click", openModal);

        let closeModal = function(event) {
            if (event.target === modalContainer) {
                modalContainer.style.display = "none";
            }
        };
        window.addEventListener("click", closeModal);

        let xCloseModal = function() {
            modalContainer.style.display = "none";
        }
        closeRedX.addEventListener("click", xCloseModal);
* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            margin: 20px;
        }
        
        #modalButtonDiv {
            text-align: center;
        }
        
        #modalButton {
            background-color: rgb(37, 140, 102);
            width: 100px;
            padding: 0.5rem 0;
            border-radius: 3px;
            font-weight: bold;
        }
        
        #modalContainer {
            display: none;
            z-index: 1;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: rgba(0, 0, 0, 0.4);
        }
        
        #modalContent {
            background-color: white;
            padding: 20px;
            margin: 15%;
            border: 1px solid black;
            width: 80%;
        }
        
        #redX {
            background-color: red;
            color: white;
            font-weight: bold;
            float: right;
            cursor: pointer;
            width: 40px;
            height: 40px;
            font-size: 36px;
            text-align: center;
        }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
</head>

<body>
    <div id="modalButtonDiv">
        <button id="modalButton">OpenModal</button>
    </div>
    <div id="modalContainer">
        <div id="modalContent">
            <span id="redX">&times;</span>
            <h1>Modal Title</h1>
            <p>Modal content goes here</p>
        </div>
    </div>
    <script>
       
    </script>
</body>

</html>

0
投票

#modalContainer {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            z-index: 1;
            background: red;
        }
        
        #modalContent {
            background-color: rgba(000, 00, 0, 0.5);
            width: 100%;
            height: 100%;
            position: relative;
           
        }
        
        #redX {
            background-color: red;
            color: white;
            font-weight: bold;
            float: right;
            cursor: pointer;
            width: 40px;
            height: 40px;
            font-size: 36px;
            text-align: center;
        }

你也可以这样得到背景颜色！！

0
投票

我在 HTML 中调用 div modalContent，在 CSS 中调用 modal-content。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.