模态框内容区背景色异常及滚动失效问题技术求助

Hey there! Let's work through your two modal problems step by step:

1. Resolving .modal-content Background Color Not Taking Effect #

You set background-color: transparent but it's showing white—this almost always means a higher-priority CSS rule is overriding your style, or browser default user-agent styles are interfering. Here are two fixes to try:

• Boost selector specificity: Use a more targeted selector to outrank conflicting styles (preferred over !important):

  .modal .modal-content {
    background-color: transparent; /* Swap this for any color you want, like #f0f0f0 */
  }
  

• Check for conflicts via dev tools: Hit F12 to open your browser's developer tools, select the .modal-content element, and look at the Styles panel. If your background rule is struck through, you’ll see which other rule is overriding it—adjust that rule’s specificity or update your own.

2. Enabling Scroll Inside the Modal Content Area #

Right now, you added overflow: auto to the .modal container, which makes the entire backdrop scroll. To get the content box itself to scroll when clicked, we need to constrain .modal-content's height and enable internal scrolling:

Update your .modal-content CSS like this:

.modal-content {
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 500px;
  text-align: center;
  background-color: transparent; /* Keep your desired color here */
  max-height: 70vh; /* Limits height to 70% of the viewport—tweak this as needed */
  overflow-y: auto; /* Adds vertical scroll when content overflows */
}

Also, tweak the .modal rule to hide the backdrop's scrollbar (since we don’t need it anymore):

.modal {
  font-weight: bold;
  display: none;
  position: fixed;
  z-index: 1;
  padding: 50px 0px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Changed from auto to hidden */
  background-color: rgba(0, 0, 0, 0.4); /* Fixed your rgba syntax—you missed the 'a' earlier! */
}

Full Updated CSS Code #

.modal {
  font-weight: bold;
  display: none;
  position: fixed;
  z-index: 1;
  padding: 50px 0px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 500px;
  text-align: center;
  background-color: transparent; /* Replace with your preferred color */
  max-height: 70vh;
  overflow-y: auto;
}

After these changes, your .modal-content background should display correctly, and you’ll be able to scroll the content by clicking inside the modal box itself.

内容的提问来源于stack exchange，提问作者Pooja