bulma - 如何正确渲染 Bulma 模态？

Question

我正在尝试实现 Bulma 模态，但我不明白出了什么问题。

我的代码是这样的：

<div class="modal is-active">
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="dropdown is-active">
      <div class="dropdown-trigger">
        <button class="button" aria-haspopup="true" aria-controls="currency-dropdown">
          <span>All currencies</span>
          <span class="icon is-small">
            <i class="fas fa-angle-down" aria-hidden="true"></i>
          </span>
        </button>
      </div>
      <div class="dropdown-menu" id="currency-dropdown" role="menu">
        <div class="dropdown-content">
          <a class="dropdown-item">USD</a>
          <a class="dropdown-item">GBP</a>
          <a class="dropdown-item">EUR</a>
        </div>
      </div>
    </div>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

这就是渲染的内容：

我不明白我应该在模式中放什么，我不明白为什么下拉项目没有呈现。

标签： bulma

Answer 1

好吧，这就是我让它工作的方式。我正在与 Bulma.io 合作

 <!--- CARD 1 Ready---->

                    <div class="column  transparent ">

                        <div class="card-content has-text-right one border">
                            <figure class="image is-square ">
                            </figure>
                            <!----BUTTON ON CARD---->

                            <button class="button no-hover is-text" onclick="toggleModal('modal-one')">

                                <ion-icon class="btn has-text-white" name="copy" size="small"></ion-icon>

                            </button>
                            <!---- END BUTTON ON CARD---->


                        </div>


                        **<!----MODAL---->**

                        <div id="modal-one" class="modal">
                            <div class="modal-background one"></div>

                            <div class="modal-content border" onclick="toggleModal">
                                <div class="box has-background-white has-text-left ">
                                    <p class=" modal-text has-text-black is-size-6-mobile">
                                        <strong class="has-text-grey-light">
                                            /* Fallback for old browsers */
                                        </strong>
                                        <br>
                                        background: #12c2e9; </p>

                                    <p class="modal-text has-text-black is-size-6-mobile">
                                        <strong class="has-text-grey-light">
                                            /* Chrome 10-25, Safari 5.1-6 */
                                        </strong>
                                        <br>
                                        background: -webkit-linear-gradient(45deg, #c471ed, #12c2e9);
                                    </p>

                                    <p class="modal-text has-text-black is-size-6-mobile">
                                        <strong class="has-text-grey-light">
                                            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
                                        </strong>
                                        <br>
                                        background: linear-gradient(45deg, #c471ed, #12c2e9);
                                    </p>



                                    <div class="footer has-text-centered is-narrow">

                                        <!----COPY TEXT BUTTON---->

                                        <button class="btn button one dribbble-id  is-rounded  is-hoverable is-centered" data-clipboard-text="
                                                background: #12c2e9;
    /* fallback for old browsers */
                                    background: -webkit-linear-gradient(45deg, #c471ed, #12c2e9);
    /* Chrome 10-25, Safari 5.1-6 */
                                    background: linear-gradient(45deg, #c471ed, #12c2e9);

    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 

    }">
                                            Get your code !
                                        </button>
                                        <!----END COPY TEXT ICON---->


                                    </div>

                                </div>


                            </div>

                            <!---- CLOSE MODAL ICON---->

                            <button class="modal-close is-large" aria-label="close" onclick="toggleModal('modal-one')"></button>

                            <!----END CLOSE MODAL ICON---->

                        </div>

                        <!----END MODAL---->

                    </div>

模态的 Javascript

//Here we will controll the modal.
        function toggleModal(modal) {
            var Modal = document.querySelector(`#${modal}`);
            Modal.classList.toggle('is-active');
        };