Question

我正在从BS3迁移到BS4.1

在我的应用中，我确实使用了ajax加载模式。

在布局中我有

import Home from './ui/Home';
import About from './ui/About';
import Contact from './ui/Contact';
export default class Container extends React.Component {
render() {
return (
  <div>
    <Home ref={(Component) => { this.Home = Component; }} />
    <About ref={(Component) => { this.About = Component; }} />
    <Contact ref={(Component) => { this.Contact = Component; }} />
  </div>
)}};


export default class Navigationbar extends React.Component {
render() {
    return (
        <nav className="navbar">
            <Link to="/"><img src={HomeIcon} alt="home-button"
                onClick={() => scrollToComponent(this.refs.Home))}/>
            </Link>
            <Link to="/about"><img src={AboutIcon} alt="about-button" 
                onClick={() => scrollToComponent(this.refs.About))}
            /></Link>
        </nav>
    );
}

然后按钮

<div class="modal fade" id="myModalToFillInfo" tabindex="-1" role="dialog" aria-labelledby="myModalToFillInfoLabel" aria-hidden="true">
</div>

和简单的JS函数

<button type="button" class="btn btn-primary" title="Informace o uživateli" onclick="showUserDetail(@u.Id)" data-toggle="modal" data-target="#myModalToFillInfo">
   <i class="fas fa-info" aria-hidden="true"></i>
</button>

Func load，例如this

showUserDetail = function (id) {
    $.get('/Uzivatel/ModalUserInfo/' + id,
        function (data) {
            $('#myModalToFillInfo').html(data);
        });
}

所以它是一个示例模式togather。多亏了数据切换和目标，它会自动打开模态。

问题是关闭按钮不起作用。

相同的代码在BS3中工作。

没有人知道如何解决这个问题吗？

Answer 1

we manually close the bootstrap modal like

  <div class="modal" id="AddQueModal">
    <div class="modal-dialog" role="document">
  <div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
    <button type="button" class="close closeModel" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    ...
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data- 
  dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
  </div>
  </div>
 </div>

<script>
 $(".closeModel").click(function() {
    $('#AddQueModal').modal('toggle');
 });
</script>

Bootstrap 4 ajax加载模态

1 个答案: