Question

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"></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>

Answer 1

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

Answer 2

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).

友情链接