最近在网站开发过程中,涉及到thickbox弹出选择商品对话框然后添加到购物清单,并关闭弹出框的功能,因为后台是iframe框架结构,代码如下:
上方是导航nav,左侧是菜单menu,右侧才是操作区域,要实现的弹出thickbox框的操作是在右侧iframe中进行的,首先利用按钮弹出thickbox层,代码如下:
<span class = "kwd" > function </span><span class = "pln" > </span><span class = "typ" >Search</span><span class = "pun" >()</span><span class = "pln" > </span><span class = "pun" >{</span><span class = "pln" > </span><span class = "com" > //tb_init("search");</span><span class="pln"> tb_show</span><span class = "pun" >(</span><span class = "str" > "搜索结果" </span><span class = "pun" >,</span><span class = "pln" > </span><span class = "str" > "/goods/search?width=800&telOrder=1&keyType=" </span><span class = "pln" > </span><span class = "pun" >+</span><span class = "pln" > $</span><span class = "pun" >(</span><span class = "str" > "#keyType" </span><span class = "pun" >).</span><span class = "pln" >val</span><span class = "pun" >()</span><span class = "pln" > </span><span class = "pun" >+</span><span class = "pln" > </span><span class = "str" > "&keywords=" </span><span class = "pln" > </span><span class = "pun" >+</span><span class = "pln" > encodeURI</span><span class = "pun" >(</span><span class = "pln" >$</span><span class = "pun" >(</span><span class = "str" > "#keywords" </span><span class = "pun" >).</span><span class = "pln" >val</span><span class = "pun" >()),</span><span class = "pln" > </span><span class = "kwd" > null </span><span class = "pun" >);</span><span class = "pln" > </span><span class = "pun" >}</span> |
然后search.aspx页面中选中checkbox的click事件,异步提交商品信息到后台保存,然后关闭当前层,代码如下:
<span class = "kwd" > function </span><span class = "pln" > </span><span class = "typ" >AddToOrder</span><span class = "pun" >(</span><span class = "pln" >id</span><span class = "pun" >)</span><span class = "pln" > </span><span class = "pun" >{</span><span class = "pln" > </span><span class = "kwd" > if </span><span class = "pun" >(</span><span class = "pln" >$</span><span class = "pun" >(</span><span class = "str" > "#" </span><span class = "pun" >+</span><span class = "pln" >id</span><span class = "pun" >).</span><span class = "pln" >attr</span><span class = "pun" >(</span><span class = "str" > "checked" </span><span class = "pun" >))</span><span class = "pln" > </span><span class = "pun" >{</span><span class = "pln" > </span><span class = "com" > //alert($("#" + id).attr("checked"));</span><span class="pln"> $</span><span class = "pun" >.</span><span class = "pln" >post</span><span class = "pun" >(</span><span class = "str" > "/order/addtoorder" </span><span class = "pun" >,</span><span class = "pln" > </span><span class = "pun" >{</span><span class = "pln" > goodsId</span><span class = "pun" >:</span><span class = "pln" > id </span><span class = "pun" >},</span><span class = "pln" > </span><span class = "kwd" > function </span><span class = "pun" >(</span><span class = "pln" >data</span><span class = "pun" >)</span><span class = "pln" > </span><span class = "pun" >{</span><span class = "pln" > </span><span class = "com" > //alert(data);</span><span class="pln"> parent</span><span class = "pun" >.</span><span class = "pln" >tb_remove</span><span class = "pun" >();</span><span class = "pln" > </span><span class = "com" > //注意这里是错误的,因为iframe的原因parent获取的是整个窗口,而不是当前的iframe中的页面</span><span class="pln"> </span><span class = "pun" >},</span><span class = "pln" > </span><span class = "str" > "json" </span><span class = "pun" >);</span><span class = "pln" > </span><span class = "pun" >}</span><span class = "pln" > </span><span class = "pun" >}</span> |
注意:parent.tb_remove();这句是不能关闭当前窗口的,因为当前页面是在iframe中,parent获取的是整个窗口,需要再调用右侧iframe才是真正的thickbox的parent页面
改成如下代码,可以成功关闭thickbox:
<span class = "pln" >parent</span><span class = "pun" >.</span><span class = "pln" >frames</span><span class = "pun" >[</span><span class = "lit" >2</span><span class = "pun" >].</span><span class = "pln" >tb_remove</span><span class = "pun" >();</span> |