本文实例讲述了jQuery弹出层插件popShow用法。分享给大家供大家参考,具体如下:

本文实例讲述了jQuery弹出层插件popShow(改进版)用法。分享给大家供大家参考,具体如下:

popShow弹出层

前面一篇《jQuery弹出层插件popShow用法示例》分析了popShow插件的基本用法,这里再对插件进行一番改进。

图片 1

popShow弹出层

图1.1 弹出层效果

图片 2

1、引入JS和CSS文件

图1.1 弹出层效果

<link href="popShow.css" rel="stylesheet" type="text/css" />
<script src="/js/common/jquery.min.js" type="text/javascript"></script>
<script src="popShow.js" type="text/javascript"></script>

1、引入JS和CSS文件

注意:这里需要引入JQuery库文件。

<link href="popShow.css" rel="stylesheet" type="text/css" />
<script src="/js/common/jquery.min.js" type="text/javascript"></script>
<script src="popShow.js" type="text/javascript"></script>

2、编写HTML代码

注意:这里需要引入jQuery库文件。

<div id="swinLogin" style="display:none;">
  <div class="pWrap">
    <table class="g_form">
      <tr>
        <th class="g-form-label">*用户名</th>
        <td><input id="txtUserName" type="text" /></td>
      </tr>
      <tr>
        <th>*密码</th>
        <td><input id="txtPsw" type="password" /></td>
      </tr>
      <tr>
        <th></th>
        <td><input type="button" value="登录" /></td>
      </tr>
    </table>
  </div>
</div>

2、编写HTML代码

3、popShow的使用

<div id="swinLogin" style="width:230px; display:none;">
  <table>
    <tr>
      <th>用户名</th>
      <td><input id="txtUserName" type="text" /></td>
    </tr>
    <tr>
      <th>密码</th>
      <td><input id="txtPsw" type="password" /></td>
    </tr>
    <tr>
      <th></th>
      <td><input type="button" value="登录" /></td>
    </tr>
  </table>
</div>

(1) 打开弹出层

3、popShow的使用

popShow({ title: "用户登录", ele: "#swinLogin", width: 468 });
//打开弹出层

(1) 打开弹出层

参数说明:

$("#swinLogin").popShow("用户登录");

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图