打开弹出窗口的不同风格

Different style of opening popup window

本文关键字：风格 窗口      更新时间：2023-09-26

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

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

您应该看看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>
相关文章：