gpt4 book ai didi

javascript - 嵌套在面板内的显示模式

转载 作者:行者123 更新时间:2023-11-27 23:33:56 25 4
gpt4 key购买 nike

我正在使用 Bootstrap 并使用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>

哪里<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变为 true,则不显示模态。我相信这是因为模式嵌套在 Bootstrap panel 中.

如何让模态框出现?

最佳答案

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

要使用 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>

关于javascript - 嵌套在面板内的显示模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34290501/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com