javascript - 如何将不同的格式或样式应用于弹出窗口

Question

我以简单的格式显示一个弹出窗口。我想应用不同的打开弹出窗口的格式。如何应用格式或样式以使其在弹出窗口打开时看起来非常好？以下是我的源代码：

HTML：

<div onMouseOver="show('healing')" onMouseOut="hide('healing')"> 
  <div id="healing" class="bgdiv" > 
    <div id ="title" class="Title"> Healing</div>
    <img class="img"  src="images/healing.bmp"> 
    <div class="description" >Welcome Sir.</div>
  </div>
</div> 

CSS：

#showhealing, #innovations, #div3 {
    visibility: hidden;    
}

JavaScript：

function show(id) {
    document.getElementById(id).style.visibility = "visible";
}

Answer 1

PoeHaH是对的；您可以使用 CSS 设置弹出窗口的样式。学习 CSS 的一个很好的资源是Mozilla 开发者网络。

例如，在你的 CSS 中试试这个：

#healing {
    visibility: hidden;
    border: 1px solid blue;
    background: grey;
}

以上将为弹出窗口提供蓝色边框和灰色背景。不漂亮，我知道，但它证明了原则。

顺便说一句，您的代码示例中存在一些差异（即在您拥有的 CSS 中#showhealing，在 HTML 中没有等效项）。