代码之家 › 专栏 › 技术社区 › CCCC

bootstrap-如何默认显示modal而不是使用按钮

bootstrap-4 reactjs css javascript

CCCC · 技术社区 · 3 年前

从…起 Bootstrap website ,它总是使用按钮来显示模态。

我使用的是React,所以我想使用javascript来操纵模态是否显示。

有什么方法可以使模式显示为默认显示吗?

Modal.js

...
return(
<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </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>
)

import "./styles.css";
import Modal from './Model'

export default function App() {
  return (
    <div className="App">
      <h1>123</h1>
      <Modal/>
    </div>
  );
}

0 回复 | 直到 3 年前

Hossein 3 年前

您可以使用jquery来显示或隐藏

   $("#id of your modal").modal("show"); 
   $("#id of your modal").modal("hide");

jQuery必须首先被引用。在引导之前如果你只想使用纯javascript,你可以手动更改它,如下所示:

  <!-- Modal -->
<div id="mymodal">
    <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" id="close-btn" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button id="close-btn" 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>

    // select close  buttons
    const mymodal = document.getElementById('mymodal');
    const close_btn = document.querySelectorAll("#close-btn");

    //show the modal 
    mymodal.style.display = "block"


    //close modal function 
    function hide() {
        mymodal.style.display = "none"
    }

    //clise the modal when you click the close btns
    close_btn.forEach(close => {
        close.addEventListener("click", hide)
    })
</script>

并根据需要更改脚本

推荐文章