美创科技技术社区

注册

 

发新话题 回复该主题

jqmodal 弹出框插件 鼠标拖动 [复制链接]

1#

1、创建文件夹,新建静态页面test.html

2、并在同级目录中创建新的文件夹cssjs

3、复制jquery-1.3.2.min.jsjqModal.jsjqDnR.js三个文件到js文件夹

4、复制jqModal.csscss文件夹

5、打开test.html页面在head处导入jscss库如下:

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="js/jqModal.js" type="text/javascript"></script>

<script src="js/jqDnR.js" type="text/javascript"></script>  

<link rel="stylesheet" type="text/css" media="screen" href="css/jqModal.css" />

6、body中编写弹出窗体的div的代码

<div class="pop_box" id="pop">

  <div class="title">

  <div class="move">标题:CAPAA弹出框(鼠标点击该区域可实现拖拽)</div>

  </div>

  <div class="content">内容</div>

</div>

7、head中编写弹出窗体样式

.pop_box {

background-color: #79A5D1;

display: none;

height: 342px !important;

left: 50%;

margin-left: -250px;

padding: 5px;

position: fixed;

top: 150px;

width: 500px;

z-index: 9999;

}

.title{

border-bottom:1px solid black;

height:25px;

}

.title .c_title{

float:left;

}

.title .close{

float:right;

cursor: pointer;

}

.content{

margin:4px 2px 2px 2px;

background-color:white;

height:300px;

}

/*此样式不能省略,是定义窗体可拖拽的。且必须与jshtml保持一致。*/

div.move {cursor: move;}

8、添加按钮出发弹出窗口

<div><input id="show" type="button" value="请点击我show"/></div>

9、编写弹出窗口的js代码

<script type="text/javascript">

$().ready(function() {

  /** 单击show弹出窗口 **/  

  jQuery("#show").click(function() {

        jQuery("#pop").jqmShow();

  });

  

  /** 支持鼠标拖拽窗体

   "pop" – 为需要拖拽的窗体的最外层divid "move" – 为标题栏,也是鼠标选中拖拽的有效区  **/

  $('#pop').jqm({

  }).jqDrag('.move');/** 如果move需要改动,则要修改相应的css和页面html中的对应名称  **/

    

});

</script>

10、Firefox浏览器打开test页面并点击按钮查看效果。



详例请下载此附件:  jqmodal弹出可拖拽窗体
分享 转发
TOP
发新话题 回复该主题