tipswindown 在asp.net中弹出层内的控件失效的解决办法

来源:互联网 发布:服务器防ddos攻击软件 编辑:程序博客网 时间:2024/06/05 20:20

首先说一下tipswindown的使用方法吧,即使像其他jquery插件一样简单

还是写详细点吧,既然是js那么少不了导入js文件,既然是jquery插件,那么少不了jquery导入及插件样式的导入,这样说是不是很罗嗦,直接上代码

<script src="/utility/jquery-1.3.2.min.js" type="text/javascript"></script><script src="/utility/tipswindown.js" type="text/javascript"></script><link type="text/css" href="/style/tipswindown.css" rel="stylesheet" />


好了,导入完毕啦,开始使用,按照作者 Await 的本意 有以下几种方式

1。弹出文本信息提示: tipsWindown("此为标题","text:提示信息内容","250","150","true","","true","msg")

2。弹出页面中的某个ID的对象(一般为div):tipsWindown("标题","id:testID","300","200","true","","true","id")

3。弹出图片: tipsWindown("图片","img:图片路径","250","150","true","","true","img")

4。get加载一个.html文件(也可以是其他后缀名也可以带参数,如a.aspx?id=123之类的): tipsWindown("标题","url:get?test.html","250","150","true","","true","text");

5。加载一个页面到框架显示:tipsWindown("标题","iframe:http://leotheme.cn","900","580","true","","true","leotheme");

6.弹出一个不能拖动且没有遮罩背景的文本信息层: tipsWindown("提示","text:提示信息内容","250","150","false","","false","msg")

7.弹出一个不能拖动,三秒钟自动关闭的层: tipsWindown("提示","text:提示信息内容","250","150","false","3000","true","msg")

我用了第二种弹出页面的某个div,然后在div中的控件添加了时间,比如加了按钮,结果按钮事件不执行,基于这种情况我查看了作者的js源文件

中的对外调用的方法

function tipsWindown(title,content,width,height,drag,time,showbg,cssName) {$("#windown-box").remove(); //请除内容var width = width>= 950?this.width=950:this.width=width;    //设置最大窗口宽度var height = height>= 527?this.height=527:this.height=height;  //设置最大窗口高度if(showWindown == true) {var simpleWindown_html = new String;simpleWindown_html = "<div id=\"windownbg\" style=\"height:"+$(document).height()+"px;filter:alpha(opacity=0);opacity:0;z-index: 999901\"></div>";simpleWindown_html += "<div id=\"windown-box\">";simpleWindown_html += "<div id=\"windown-title\"><h2></h2><span id=\"windown-close\">关闭</span></div>";simpleWindown_html += "<div id=\"windown-content-border\"><div id=\"windown-content\"></div></div>"; simpleWindown_html += "</div>";$("body").append(simpleWindown_html);//看这句,作者是把层放到了当前页的body上面,                                                             //可想而知,弹出层里的控件都加到了aspx页面form外                                                             //form 外的控件肯定失效了,于是做如下改动                        show = false;}


更改后

function tipsWindown(title,content,width,height,drag,time,showbg,cssName,form) {                                                                         //多加了个form参数,为当前页的form的id$("#windown-box").remove(); //请除内容var width = width>= 950?this.width=950:this.width=width;    //设置最大窗口宽度var height = height>= 527?this.height=527:this.height=height;  //设置最大窗口高度if(showWindown == true) {var simpleWindown_html = new String;simpleWindown_html = "<div id=\"windownbg\" style=\"height:"+$(document).height()+"px;filter:alpha(opacity=0);opacity:0;z-index: 999901\"></div>";simpleWindown_html += "<div id=\"windown-box\">";simpleWindown_html += "<div id=\"windown-title\"><h2></h2><span id=\"windown-close\">关闭</span></div>";simpleWindown_html += "<div id=\"windown-content-border\"><div id=\"windown-content\"></div></div>"; simpleWindown_html += "</div>";//$("body").append(simpleWindown_html);$(form).append(simpleWindown_html);//把弹出层加到form里面,里面的控件也自然到了form里面,一切恢复正常                show = false;}

当然调用的时候要多加个参数即多传个form的id

<script type="text/javascript">        //弹出层的方法        function showDivView() {            tipsWindown("认领商品前请先回答供应商几个问题", "id:showDiv", "650", "500", "true", "", "true", "id", $('form')[0])            return false;         } </script>

除此之外呢,还需要把插件中应用的图片下载下来放到你的项目中以加快弹出层的加载效率,修改js 源文件的这句
var templateSrc = "/Themes/default/zh-cn"; //设置loading.gif路径 ,作者写的很清晰啦,这里路径不要带"/"

因为他的路径是后面串起来的  看这句$(this).html("<img src='"+templateSrc+"/images/loading.gif' class='loading' />");  可见,写路径要注意了,放到images文件夹中

其他还有样式中的图片路径

    background: url(/themes/default/zh-cn/images/bg.png) 0 -330px repeat-x;  路径改成自己的,我这里写的自己的

以上修改后的内容,及图片文件我都上传到了这里,有需要的可以下载,也可以自己修改

点这里去下载页

最后值的称赞的是 作者 Await   最新更新 XYTipsWindow 2.8,有兴趣的可以去用用,再次感谢 Await



	
				
		
原创粉丝点击