The modal window is not displayed

Question

I am trying to show a modal window as in this example. https://codepen.io/anon/pen/dgRKEP?editors=1010 But for some reason, the modal window is not shown.

  <div id="app6">
        <div class="has-text-centered">
            <button class="button is-success" @click="showModal = true">
                show modal!
            </button>
        </div>
        <modal title="Title of the modal" v-show="showModal" @close="showModal = false">
            <div class="content">
                is modal!
            </div>
        </modal>

</div>

Script:

Vue.component('modal', {
  template: `
    <div class="modal is-active">
      <div class="modal-background"></div>
      <div class="modal-content">
        <div class="box"><slot></slot></div>
      </div>
      <button class="modal-close" @click="$emit('close')"></button>
    </div>
  `
});

 new Vue({
        el: '#app6',
        data:{
          ...
            showModal: true
   ...
        },

Husam Ibrahim Husam Ibrahim · Accepted Answer · 2018-10-12T08:10:04

I'm assuming you're using Bulma. So you need to include their stylesheet for things to work correctly. The simplest way is to just use a CDN. So you need to include this line in your head tag or somewhere before your app div.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">

Like this for example ..

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">

<div id="app">
  <div id="app" class="container">

    <div class="has-text-centered">
      <button class="button is-success" @click="showModal = true">
        Покажите мне всплывашечку!
      </button>
    </div>

    <modal title="Title of the modal" v-show="showModal" @close="showModal = false">
      <div class="content">

      </div>
    </modal>
  </div>
</div>

See this JSFiddle

The modal window is not displayed

2 Answers