当前位置： 文江博客话题详情

我可以让HTML/CSS/JS模态隐藏，但是当显示时，它不能正确定位或具有BG颜色或边框

发布于 2025-02-09 17:31:36 字数 4156 浏览 1 评论 0原文

我假设我的JS和HTML是正确的。我将完整的代码放入了不久的时间，因此可以看到整个问题。我复制了几个网站CSS策略，无济于事。我确实尝试了著名的网站，例如W3Schools和Javascript.plainenglish.io。

我要去哪里？我不知道该为#modalcontent的CSS放置什么，我认为我在CSS中添加的内容#modalcontainer在我不了解的方式上会影响#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的背景正常，而模态窗口的关闭也很关闭还。

原文

I am assuming that my JS and HTML is correct. I put my full code in, not so long, so the entire problem can be seen. I copied several sites CSS strategies,to no avail. I did try reputable sites, like W3Schools, and javascript.plainenglish.io.

Where am I going wrong? I don't know what to put in my CSS for #modalContent and I think what I am putting in my CSS for #modalContainer is affecting #modalContent in ways I do not understand. My problem is the the text of my modal content is being shoved all the way to the top left of the modal window, and it does not have a window of its own to hold the modal contents. Otherwise, when the modal is unhidden, the background covers all of the screen and seems to be working fine.

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">×</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);

To reiterate, there is nothing I can put in #modalContainer and/or #modalContent so that my modal window shows with the text in it, right now only the background of #modalContainer is working, and the closing of the modal window also.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

倚栏听风 2025-02-16 17:31:37

就是我在我的html中调用了div modalcontent，并在我的CSS中打了模态含量。

It was that I called the div modalContent in my HTML and modal-content in my CSS.

回复 原文
东北女汉子 2025-02-16 17:31:36

威廉·S，
我已经编辑了您的代码，

 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">×</span>
            <h1>Modal Title</h1>
            <p>Modal content goes here</p>
        </div>
    </div>
    <script>
       
    </script>
</body>

</html>

William S,
I have edited your code like this,

 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">×</span>
            <h1>Modal Title</h1>
            <p>Modal content goes here</p>
        </div>
    </div>
    <script>
       
    </script>
</body>

</html>

回复 原文
吃兔兔 2025-02-16 17:31:36
#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;
        }

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

#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;
        }

You can get the background color like this also!!

回复 原文
~没有更多了~

关于作者

别挽留

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文