不同风格的弹出窗口

Question

我以一种简单的格式显示一个弹出窗口。 我想应用打开窗口的其他格式。 我如何应用格式或样式，以便在弹出窗口打开时看起来很好？ 以下是我的源代码：

<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>

JavaScript代码

<script language="JavaScript">
function show(id) 
{     
    document.getElementById(id).style.visibility = "visible"; 
} 
</script>

Answer 1

您应该看看JQuery（http://jquery.com/）。 JQuery是一个Javascript框架，您可以使用效果显示淡入淡出，滑动，显示/隐藏等元素。

您要做的就是稍微更改代码（jQuery解决方案）：

<div id="showhealing">
    <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>

<script>
    $('#showhealing').hover(
        function() { $('#healing').show(500) }, function() { $('#healing').hide(500) }
    );
</script>

当您使用JQuery UI时（它是JQuery的扩展），您也会获得更多的效果。 （在这里查看： http : //jqueryui.com/demos/effect/ ）。

要使用JQuery UI的效果，您需要像这样更新脚本：

<script>
    $('#showhealing').hover(
        function() { $('#healing').show("explode", {}, 500); }, function() { $('#healing').hide("explode", {}, 500) }
    );;
</script>