嵌套在面板中的显示模式答案

【问题标题】：display modal nested within panel嵌套在面板中的显示模式
【发布时间】：2015-12-15 13:26:45
【问题描述】：

我正在使用 Bootstrap 并做出反应以显示一个面板组件，其中包含一个模态：

<div className="panel panel-default" id="content">
   <div className='panel-heading text-center' id='tableButtons'>
      <h2 className="panel-title central-headingText">Assignments </h2>
   </div>
   <Table/>
</div>

<Table/> 在哪里：

        <div>
            <div id='tableContainer'>
                <table className="table table-condensed"></table>
            </div>

            {this.state.displayDeleteModal
                ?
                <div id="myModal" className="modal fade" role="dialog">
                    <div className="modal-dialog">

                    <div className="modal-content">
                      <div className="modal-header">
                        <button type="button" className="close" data-dismiss="modal">&times;</button>
                      </div>
                      <div className="modal-body">
                        <p>Are you sure you want to make the deletion?</p>
                      </div>
                    </div>

                  </div>
                </div>
                :
                null
            }

        </div>

但是，当变量this.state.displayDeleteModal 为真时，模态不会显示。我相信这是因为模态嵌套在 Bootstrap panel 中。

如何让模态出现？

【问题讨论】：

触发模态可见性的代码在哪里？一些点击或按钮，因为默认情况下，modal 是不可见的，或者你是在 this.state.displayDeleteModal 变为 true 时触发 modal 的 show 事件
请参阅"Should questions include “tags” in their titles?"，其中的共识是“不，他们不应该”！
为了使模态可见，我将this.state.displayDeleteModal设为true。

标签： javascript twitter-bootstrap bootstrap-modal

【解决方案1】：

您需要根据您的情况手动打开一个模式。

使用 JavaScript 显示模式

$('#myModal').modal('show')

http://getbootstrap.com/javascript/#modals-options

试试这个代码：

    <div>
        <div id='tableContainer'>
            <table className="table table-condensed"></table>
        </div>

        {this.state.displayDeleteModal
            ?
            <div id="myModal" className="modal fade" role="dialog">
                <div className="modal-dialog">

                <div className="modal-content">
                  <div className="modal-header">
                    <button type="button" className="close" data-dismiss="modal">&times;</button>
                  </div>
                  <div className="modal-body">
                    <p>Are you sure you want to make the deletion?</p>
                  </div>
                </div>

              </div>
            </div>
            <script>
                $(function(){
                   $('#myModal').modal('show');
                });
            </script>  
            :
            null
        }

    </div>

【讨论】：

我添加了代码<script> {$(function(){ $('#myModal').modal('show'); });} </script>，但在那一行出现错误：Adjacent elements must be wrapped in an enclosing tag while parsing file。
另外，如何调用该 JQuerry 函数？