Ajax显示一个浮动的窗口(实例)

最新推荐文章于 2021-11-17 14:19:26 发布

QQ89697761

最新推荐文章于 2021-11-17 14:19:26 发布

阅读量708

点赞数

CC 4.0 BY-SA版权

分类专栏： Ajax 文章标签： ajax stylesheet function div dao border

本文链接：https://blog.youkuaiyun.com/QQ89697761/article/details/6359083

Ajax 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何通过HTML、CSS及jQuery实现一个可弹出并带淡入淡出效果的窗口，包括设置窗口样式、定义交互行为等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先添加js文件

<mce:script type="text/javascript" src="jslib/showmain.js" mce_src="jslib/showmain.js"></mce:script> <mce:script type="text/javascript" src="jslib/jquery-1.5.js" mce_src="jslib/jquery-1.5.js"></mce:script>  <link rel="stylesheet" type="text/css" href="css/styles.css" mce_href="css/styles.css" />

页面中的内容

<body>  <a onclick="show()" href="#" mce_href="#">显示一级菜单</a>  <div id="one">  <div id="title">我是标题栏...<span id="close" onclick="head1()">X</span></div> <div id="conter">我是内容！</div> </div> </body>

js文件里边的内容

function show() { //alert("message"); //方法1:直接显示的效果 //$("#one").css("display","block"); //方法2：有点动画的效果 //$("#one").show("slow"); //方法3：有淡入淡出的效果 $("#one").fadeIn("slow"); } function head1() { //alert("zhao dao one l ..."); //$("#one").css("display","none"); //$("#one").hide("slow"); $("#one").fadeOut("slow"); }

css样式文件

#one{ border:1px red solid; width: 550px; height: 350px; position: absolute; top: 200px; left: 200px; display: none; } #title{ background-color: pink; color: green; } #close{ margin-left: 440px; cursor: pointer; }