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>

不同风格的打开弹出窗口

1 个答案: