thickBox学习笔记 - 条件满足则显示thickBox

最新推荐文章于 2023-03-20 23:17:44 发布

最新推荐文章于 2023-03-20 23:17:44 发布 · 127 阅读

文章标签：

#jQuery #JavaScript #CSS #Ajax #Web #ViewUI

JS/jQuery 专栏收录该内容

9 篇文章

订阅专栏

Jquery的ThickBox插件非常好用，可以显示一张图片、多张图处、AJAX和IFrame等多种样式的内容到ThickBox,都要A click触发，而有的时候后台程序根据不同权限显示不同内容，这时希望根据条件输入框的值判断是否显示ThickBox的内容,所需添加代码如下：

<script type="text/javascript" src="<web.path:path/>/resources/js/jquery.js"></script>
<script type="text/javascript" src="<web.path:path/>/resources/js/thickbox.js"></script>
<link rel="stylesheet" href="<web.path:path/>/resources/css/thickbox.css" type="text/css" media="screen" />
<script type="text/javascript">
    $(function(){

        //init thickbox的默认选择器
        tb_init('a.thickbox, area.thickbox, input.thickbox');
        $("#thickButton").click(function(event){

            event.preventDefault();
            //如果name输入框的值不为空, 则弹出thickBox对话框
            if($("#name").val()!="") {
                tb_show("","url?height=300&width=400&inlineId=myOnPageContent",false);
            }
        });
   });
</script>

<input type="text" id="name"/>
<input title="ban another user" type="button" value="Show" id="thickButton"/>