引导对话框没有在其中执行JavaScript代码

Bootstrap dialog is not executing JavaScript code inside it

本文关键字：执行 JavaScript 代码 在其中 对话框      更新时间：2023-09-26

我想把社交"喜欢"按钮(fb喜欢，推文等)在一个引导对话框(在modal-body)，所以我把<script>标签。

<div  style='display: none;' modal="shouldBeOpen" close="close()" options="opts">
    <div class="modal-header">
        <h3 class="modal-title">Modal title</h3>
        <button class="close" ng-click="close()" data-dismiss="modal">×</button>
    </div>
    <div class="modal-body">
        <table border="0" width="100%" cellspacing="0" cellpadding="0">
            <tr>
                <td>
                <!-- facebook -->
                <div id="fb-root"></div>
                <script>(function(d, s, id) {
                  var js, fjs = d.getElementsByTagName(s)[0];
                  if (d.getElementById(id)) return;
                  js = d.createElement(s); js.id = id;
                  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=228306107317368";
                  fjs.parentNode.insertBefore(js, fjs);
                }(document, 'script', 'facebook-jssdk'));</script>
                <div class="fb-like" data-href="https://www.facebook.com/CVsIntellect" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-layout="box_count" data-action="like" data-show-faces="false" data-send="false"></div>
                </td>
                <td>
                <!-- twitter -->
                <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://www.cvsintellect.com" data-text="CVsIntellect - The best free online Resume Builder. Uses LaTeX to create your CV!" data-via="CVsIntellect" data-count="vertical">Tweet</a>
                <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
                </td>

            </tr>
        </table>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
    </div>
</div>

但是在浏览器的对话框中没有显示任何东西。我是不是错过了什么特别的东西?

Bootstrap模态只是隐藏的div s

放置在模态中的脚本不是在页面加载时执行，而不是在打开时执行。如果你想在JavaScript中触发某事当modal打开时，使用:

$('#myModal').on('shown.bs.modal', function (e) {
    // do whatever you want...
})
相关文章：