开发者

Why does an AddThis widget not work if included inside a jQuery modal dialog?

If included anywhere else on the page, an AddThis bookmarking widget will work fine.

But on a jQuery modal dialog, no popup appears.

Is that because it would require another modal dialog within a modal dialog?

How to work around this?

<div id="dialog-modal" title="Modal dialog with AddThis">
    <!-- AddThis Button BEGIN -->
    <div class="addthis_toolbox addthis_default_style ">
    <a href="http://www.addthis.com/bookmark.php" class="addthis_button_compact">Share</a>
    <span class="addthis_separator">|</span>
    <a class="addthis_button_preferred_1"></a>
    <a class="addthis_button_preferred_2">开发者_StackOverflow中文版;</a>
    <a class="addthis_button_preferred_3"></a>
    <a class="addthis_button_preferred_4"></a>
    </div>
    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
    <!-- AddThis Button END -->
</div>

<script>
$(function() {

    $( "#dialog-modal" ).dialog({
        height: 140,
        modal: true
    });
});
</script>


You can use AddThis JavaScript API to render buttons or toolboxes. Reference: http://www.addthis.com/help/client-api#rendering-js


To this problem I have found two solutions. The first is to use getScript, to reload the addthis js script everytime the modal dialog (or another div) is opened, but this will create extra loading. The other solution is to simply not to let any of the divs containing the addthis code be hidden at any time (i.e. display:none), but instead hide it from the screen with .animate({marginTop:'-200px'}, 0);, .css or another method with a similar result (and of course give the html, body or a containing div a css attribute with overflow:hidden).

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜