为了账号安全,请及时绑定邮箱和手机立即绑定

Jquery实现弹出窗口

标签:
JQuery

          1. JqueryWin.jsp      <link rel="stylesheet" type="text/css" href="css/win.css">
<script type="text/javascript" src="jslib/jquery-1.2.6.js"></script>
  <script type="text/javascript" src="jslib/jqueryWin.js"></script>

--------------------------------------

<a    onclick="showWin()" href="#">显示弹出窗口</a>
        <div id="win" >
          <div id="title">标题栏<span id="close" onclick="hide()">X</span></div>
          <div id="content">内容</div>
        </div>   2. JqueryWin.js function showWin(){
  var winNode = $("#win");
  //winNode.css("display","block");
  //winNode.show("slow");
  winNode.fadeIn("slow");    
}

function hide(){
  var winNode = $("#win");
  //winNod.css("display","none");
  //winNode.hide("slow");
  winNode.fadeOut("slow");
}  3. Win.css #win{
  border
: 1px blue solid;
  width
: 300px;
  height
: 200px;
  display
: none;
  position
: absolute;
  top
: 100px;
  left
: 350px;
    
}

#title
{
  background-color
: blue;
  color
: red;
  padding-left
: 3px;
}

#content
{
  padding-left
: 3px;
  padding-top
: 5px;
}

#close
{
  padding-left
: 235px;
  cursor
:pointer;
}    感谢sean先生供稿! 

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消