Question

我有一个bootstrap-modal（我正在使用bootstrap 2.3.2 ）并且我想编写一个代码，该代码将在加载modal-body并显示用户之后执行（但在关闭之前）它）这是我的模态：

<div id="input-output-match" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button>
        <h3 id="input-output-match-header"></h3>
    </div>
    <div class="modal-body" id='match-body'></div>
    <div class="modal-footer">
        <form>
            <button class="btn" id='modalCancel' data-dismiss="modal" aria-hidden="true" >Cancel</button>
            <button class="btn btn-primary" id='save' data-dismiss="modal" aria-hidden="true">Ok</button>
        </form>
    </div>
</div>

在modal-body中，我在我的javascript代码中动态添加了一些div元素。现在我希望我的代码的某些部分将在我之前说过的模式显示用户之后执行。有没有办法做到这一点？像回调函数？

Answer 1

您有什么理由不能使用bootstrap 2.3.2中的说明吗？这很简单：

$('#myModal').on('shown', function () {
  // do something…
})

显示 - 当模式对用户可见时将触发此事件（将等待css转换完成）。

Answer 2

     <div id="input-output-match" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button>
                    <h3 id="input-output-match-header"></h3>
                </div>
                <div class="modal-body" id='match_body'>


                </div>
                <div class="modal-footer">
                    <form>
                        <button class="btn" id='modalCancel' data-dismiss="modal" aria-hidden="true" >Cancel</button>
                        <button class="btn btn-primary" id='save' data-dismiss="modal" aria-hidden="true">Ok</button>
                    </form>
                </div>
            </div>





   <script type="text/javascript">
   demo('match_body');
  function demo(){
  alert('function is runing');
    }
   </script>

Answer 3

     <div id="input-output-match" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button>
                    <h3 id="input-output-match-header"></h3>
                </div>
                <div class="modal-body" id='match_body'>


                </div>
                <div class="modal-footer">
                    <form>
                        <button class="btn" id='modalCancel' data-dismiss="modal" aria-hidden="true" >Cancel</button>
                        <button class="btn btn-primary" id='save' data-dismiss="modal" aria-hidden="true">Ok</button>
                    </form>
                </div>
            </div>





   <script type="text/javascript">
   demo('match_body');
  function demo(){
  alert('function is runing');
    }
   </script>

我已修改此代码，用于运行js脚本以在start（加载时）上运行onload仅用于某些元素body，img，iframe，运行此脚本将获得警报masager

我怎么能写出一个代码，在向用户显示modal-body之后执行

3 个答案: