建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery 弹框插件 jquery window

来源:易助科技网浏览量:10收藏

简介

jquery window是一个基于 jquery 的 window 弹出框,支持 ie 及 firefox。js 的弹出框有两个问题是比较麻烦的,就是在 iframe 里创建弹框,遮罩层要覆盖整个页面。另一个就是弹出框与 iframe 的方法调用及数据传递。此组件解决了这些问题。

(下载的附件中附有DEMO)


JQuery 弹框插件 jquery window-示例图1


JQuery 弹框插件 jquery window-示例图2


使用

1.  引用文件


<link rel="stylesheet" href="../src/skins/gray/css/screen.css">
<link rel="stylesheet" href="css/jqcodehighlighter.css">
	
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="../src/jquery.jqwindow.js"></script>
<script type="text/javascript" src="js/jqcodehighlighter.js"></script>


2. 简单用法


$.jqWindow('example_1.1', {
  width  : '50%',
  height : 300,
  top    : 'middle',
  left   : '30%',
  title  : 'Simple window 1',
  content: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.'
}).show();


$.jqWindowManager().addWindow('example_1.2', {
  top    : 0,
  left   : 0,
  title  : 'Simple window 2',
  content: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.'
}).show();


覆盖方式:


$.jqWindow('example_2.1', {
        width       : 600,
        height      : 600,
        title       : 'I`m overlay window',
        content     : 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.',
        overlayable : true
    }).show();

    $.jqWindow('example_2.2', {
        title  : 'I`m modal window',
        content: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.',
        modal  : true
    }).show();



相关链接

GitHub 地址 :https://github.com/Jullil/jqwindow

Gitee 地址:https://gitee.com/jimmy001/jquerywindow

官方文档 : https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxwindow/jquery-window-getting-started.htm