Javascript 显示嵌套在面板中的模式

Javascript 显示嵌套在面板中的模式,javascript,twitter-bootstrap,bootstrap-modal,Javascript,Twitter Bootstrap,Bootstrap Modal,我正在使用引导和react显示一个面板组件,其中包含一个模态: <div className="panel panel-default" id="content"> <div className='panel-heading text-center' id='tableButtons'> <h2 className="panel-title central-headingText">Assignments </h2> <

我正在使用引导和react显示一个面板组件,其中包含一个模态:

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

作业
其中
是:

        <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
?
&时代;
是否确实要进行删除

: 无效的 }
但是,当变量
this.state.displayDeleteModal
变为true时,将不显示模式。 我相信这是因为模态嵌套在引导
面板中


如何使模态显示?

您需要根据自己的情况手动打开模态

要使用JavaScript显示模态,请使用

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

请尝试以下代码:

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

{this.state.displayDeleteModal
?
&时代;
是否确实要进行删除

$(函数(){ $('myModal').modal('show'); }); : 无效的 }
触发modal可见性的代码在哪里?有些单击或按钮,因为默认情况下,模态不可见,或者您正在对
this.state.displayDeleteModal
启动模态的show事件。displayDeleteModal
变为true请查看,其中一致意见是“不,他们不应该”!为了使模态可见,我将
this.state.displayDeleteModal
true。我添加了代码
{$(function(){$('#myModal')。modal('show');})
但我在那一行遇到了一个错误:
在解析文件时,相邻元素必须被包装在一个封闭的标记中。
。另外,我如何调用jquery函数?