继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Jquery实现弹出窗口

linux零基础学习视频
关注TA
已关注
手记 276
粉丝 29
获赞 122

          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先生供稿! 

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP