CODEWITHSUNDEEP
javascripthtmlvue.js
EricTalv
EricTalv

Reputation: 1049

Creating multiple modals on one page with VUE

As the title implies I want to add two modal dialog's on one page. I figured out how to create on but the second one I am having troubles with.

HTML:

<body>
  <h1>-projects-</h1>
  <ul id="button-container">
    <li>
      <a id="html-modal-button" @click="showModal = true">
        <img class="htmllogo" src="images/HTMLLogo.png">
        <div class="html-text-block">
          <h2>HTML</h2>
          <p>My web projects</p>
        </div>
      </a>
      <htmlmodal v-if="showModal" @close="showModal = false"></htmlmodal>
    </li>

    <li>
      <a id="cs-modal-button" @click="showModal = true">
        <img class="csharplogo" src="images/CSHARPLogo.png">
        <div class="cs-text-block">
          <h2>C#</h2>
          <p>My windows projects</p>
        </div>
      </a>
      <csmodal v-if="showModal" @close="showModal = false"></csmodal>
    </li>
  </ul>

  <!-- MODAL SECTION -->
  <script type="text/x-template" id="html-modal-template">
    <transition name="html-modal">
      <div class="modal-mask">
        <div class="modal-wrapper">
          <div class="modal-container">
            <div class="modal-header">
              <slot name="header">HTML HEADER</slot>
            </div>
            <div class="modal-body">
              <slot name="body">HTML BODY</slot>
            </div>
            <div class="modal-footer">
              <slot name="footer">HTML FOOTER
                <button class="modal-default-button" @click="$emit('close')">OK</button>
              </slot>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </script>

  <script type="text/x-template" id="cs-modal-template">
    <transition name="cs-modal">
      <div class="modal-mask">
        <div class="modal-wrapper">
          <div class="modal-container">
            <div class="modal-header">
              <slot name="header">CS HEAD</slot>
            </div>
            <div class="modal-body">
              <slot name="body">CS BODY</slot>
            </div>
            <div class="modal-footer">
              <slot name="footer">CS FOOTER
                <button class="modal-default-button" @click="$emit('close')">OK</button>
              </slot>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </script>

</body>

</html>

VUE.JS:

$(window).load(function(){
    // CREATE THE DOM COMPONENT
    Vue.component('htmlmodal', {
        template: '#html-modal-template',
    });

    Vue.component('csmodal', {
        template: '#cs-modal-template',
    });


    // START THE APP
    new Vue({
        el:'#button-container',
        data: {
            showModal: false
        }
    })
});

**The Fiddle: ** https://jsfiddle.net/oz053uzj/

As you can see I have separated the modal section, so essentially I could simply create and edit a modal, create a vue.component and reference it.

The problem comes when I try to open the modal, it seem's to only open the second or last modal for each of the buttons, I presume its due to @click="showModal = <>" is same for both the modals, but I'm left clueless..

Upvotes: 2

Views: 7336

Answers (2)

Tanvir
Tanvir

Reputation: 126

You should use two different variable for two modal.

HTML:

<body>
        <ul id="button-container">
            <li> 
                <a id="html-modal-button" @click="showModal = true">
              First Modal
                </a>
                <htmlmodal v-if="showModal" @close="showModal = false"></htmlmodal>
            </li>

            <li>
                <a id="cs-modal-button" @click="showCsModal = true">
                Second Modal
                </a>
                <csmodal v-if="showCsModal" @close="showCsModal = false"></csmodal>
            </li>
        </ul>

        <!-- MODAL SECTION -->
        <script type="text/x-template" id="html-modal-template">
            <transition name="html-modal">
                    <div class="modal-mask">
                        <div class="modal-wrapper">
                            <div class="modal-container">
                                <div class="modal-header">
                                    <slot name="header">HTML HEADER</slot>
                                </div>
                                <div class="modal-body">
                                    <slot name="body">HTML BODY</slot>
                                </div>
                                <div class="modal-footer">
                                    <slot name="footer">HTML FOOTER
                                        <button class="modal-default-button" @click="$emit('close')">OK</button>
                                    </slot>
                                </div>
                            </div>
                        </div>
                    </div>
            </transition>
        </script>

        <script type="text/x-template" id="cs-modal-template">
            <transition name="cs-modal">
                    <div class="modal-mask">
                        <div class="modal-wrapper">
                            <div class="modal-container">
                                <div class="modal-header">
                                    <slot name="header">CS HEAD</slot>
                                </div>
                                <div class="modal-body">
                                    <slot name="body">CS BODY</slot>
                                </div>
                                <div class="modal-footer">
                                    <slot name="footer">CS FOOTER
                                        <button class="modal-default-button" @click="$emit('close')">OK</button>
                                    </slot>
                                </div>
                            </div>
                        </div>
                    </div>
            </transition>
        </script>
    </body>

VUE.JS:

new Vue({
    el:'#button-container',
    data: {
        showModal: false,
  showCsModal: false,
    }
})

**The Fiddle: ** https://jsfiddle.net/tanvir86/od2cjtkc/

Upvotes: 2

Jacob Goh
Jacob Goh

Reputation: 20855

because their v-if is based on the same data showModal.

If showModal is true, both will be displayed. And the last one will be on top.

So how about differentiating them based on a string instead of true/false ?

<a id="html-modal-button" @click="showModal = 'html-modal'">

and 

<htmlmodal v-if="showModal === 'html-modal'" ...

?

demo: https://jsfiddle.net/jacobgoh101/oz053uzj/1/

Upvotes: 6

Related Questions