overlay {

Question

我对jquery工具和javascript有点新见。我试图谷歌/搜索这个论坛，但我可能不知道究竟要搜索什么。事情是：我有一个有标签的页面。按下按钮时，在一个选项卡内部根据输入文本列出一些记录使用

加载

myUrl ='admin / listusers /'+ mySearch +'/'+ pageNr +'/';

        $("#userlist").html("<b>Loading user list...</b>"); 
        $("#userlist").load(myUrl);

加载的内容包含要在叠加层中打开的链接。

我已经尝试在所有3个位置（主页面html，制表符内部html，动态内容本身）中放置覆盖代码它仍然不起作用，它只是在同一窗口中打开链接，就像常规链接一样。

动态内容还包含另一个javascript函数，它可以正常工作（用于分页onclick =“pagepress（PageNr）：

function pagepress（pageNr）{ searchstring = document.getElementById（'searchstring'）;

        if (searchstring.value != '') { 
            mySearch = searchstring.value; 
        } else { 
            mySearch="0"; 
        } 

        myUrl = 'admin/listusers/' + mySearch +'/'+ pageNr +'/'; 

        $("#userlist").html("<b>Loading user list...</b>"); 
        $("#userlist").load(myUrl); 
    }

可能有什么问题？或者也许有人可以给我一个小贴士寻找什么？

由于

Answer 1

这就是我解决问题的方法

<script>
    $(function () {
        var overlayElem;
        $("a.overlayLink").live("click", function (e) {
            e.preventDefault();
            overlayElem = $(this);
            overlayElem.overlay({ mask: 'lightgray', effect: 'apple',
                onBeforeLoad: function () {
                    //do something on load
                },
                onClose: function () {
                    //do something on close
                },
                load: true
            });
        });


        $("#save").click(function () {
            //do something
            $.ajax({
                type: "POST",
                url: "some service",
                data: "{some data}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    //do something when success
                    overlayElem.overlay().close();
                },
                failure: function (msg) {
                    //do something when fail
                }
            });
        });
    });
</script>

我希望这可以帮助别人=）

Answer 2

动态加载的html是：

<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>

/ *使用半透明图像作为叠加* /

overlay {

/* initially overlay is hidden */
display:none;

/* growing background image */
background-image:url(http://flowplayer.org/tools/img/overlay/white.png);

/* 
    width after the growing animation finishes
    height is automatically calculated
*/
width:600px;        

/* some padding to layout nested elements nicely  */
padding:35px;

/* a little styling */  
font-size:11px;

}

外部内容的

/ *容器。使用垂直滚动条，如果需要* / .contentWrap { 高度：460像素; 宽度：600px的; 溢出-Y：汽车; }

                    <!-- the external content is loaded inside this tag --> 
                    <div class="contentWrap"></div> 

                </div>

$（function（）{

// if the function argument is given to overlay, 
// it is assumed to be the onBeforeLoad event listener 
$("a[rel]").overlay({ 

    expose: 'darkred', 
    effect: 'default', 

    onBeforeLoad: function() { 

        // grab wrapper element inside content 
        var wrap = this.getContent().find(".contentWrap"); 

        // load the page specified in the trigger 
        wrap.load(this.getTrigger().attr("href")); 
    } 

});

}）;

function pagepress(pageNr) {
        searchstring = document.getElementById('searchstring');

        if (searchstring.value != '') {
            mySearch = searchstring.value;
        } else {
            mySearch="0";
        }

        myUrl = 'admin/listusers/' + mySearch +'/'+ pageNr +'/';

        $("#userlist").html("<b>Loading user list...</b>");
        $("#userlist").load(myUrl);
    }


<div id="pages">1 | <a href="http://localhost/~olegas/xxx/index.php" onclick="pagepress(1);return false;">2</a> | <a href="http://localhost/~olegas/xxx/index.php" onclick="pagepress(2);return false;">3</a> | </div>

<div id="admin-user-table">
     <table width="100%"  border="0" cellspacing="0" cellpadding="0" style="text-align:center;">

EditLoginEmailFirst nameLast nameCompany namePhoneCurrencyCountry

<tr class="left-table-border"><td><a href="http://localhost/~olegas/xxx/index.php/admin/edit_user/1" rel="#overlay">Edit</a></td><td>admin</td>td>admin@localhost.com</td><td></td><td></td><td></td><td></td><td></td>td></td></tr>

Codeigniter jquerytools覆盖动态内容

2 个答案:

overlay {