Buefy modal Close button in header

user_16058855 0
Viewed 1209

everyone! I have modal window on Buefy. This modal open when call method:

    onEditHandler(selectedPlan) {
      const Component = Vue.extend(Plan);
      this.$buefy.modal.open({
        parent: this,
        component: Component,
        hasModalCard: true,
        trapFocus: true,
        scroll: 'keep',
        ariaModal: true,
        customClass: 'dialog',
        canCancel: 'x',
        props: {
          isActive: true,
          plan: selectedPlan,
          roles: this.roles,
          plans: this.data,
        },
        events: {
          submit() {
          },
          close() {
          },
        },
      });
    }

Plan contains code:

    <template>
      <validation-observer v-slot="{ handleSubmit }" ref="contactObserver">
        <div class="modal-card">
          <header class="modal-card-head">
            <h2 class="modal-card-title">Name</h2>
          </header>
          <section class="modal-card-body">
            <validation-provider v-slot="{ errors }" rules="required">
                <b-field label="Name"
                         :type="{ 'is-danger': errors.length }"
                         :message="errors + [ '&nbsp;' ]">
                  <b-input v-model="name"></b-input>
                </b-field>
            </validation-provider>
          </section>
          <footer class="modal-card-foot">
            <button class="button" type="button" @click="cancel">Cancel</button>
            <button class="button is-success"
                    @click="handleSubmit(submit)">Update</button>
          </footer>
        </div>
        </validation-observer>
    </template>
    <script>
    </script>

In Result open modal who has close button in right top corner (the image pinned in message) Main question: How do I move the close btn to the modal window? Thank's for answers

Modal dialog

buefy vue.js javascript
2 Answers

You can add a close button on the modal's header like this:

...
<header class="modal-card-head">
   <h2 class="modal-card-title">Name</h2>
   <button type="button" class="delete" @click="handleCancel" />
</header>
...

And there is method handleCancle() for exmaple:

 handleCancel: function() {
      this.$refs.contactObserver.reset();
      this.$parent.close();
    },
user_120207100

I solved problem so:

onEditHandler(selectedPlan) {
const Component = Vue.extend(Plan);
this.$buefy.modal.open({
  parent: this,
  component: Component,
  hasModalCard: true,
  trapFocus: true,
  scroll: 'keep',
  ariaModal: true,
  customClass: 'card-form-modal',
  canCancel: ['outside'],
  props: {
    plan: selectedPlan,
    roles: this.roles,
    plans: this.data,
  },
  events: {
    submit() {
    },
    close() {
    }
  },
});
this.changeModalPosition();

}

and Plan contains

<template>
<validation-observer v-slot="{ handleSubmit }" ref="contactObserver">
  <div class="modal-card">
    <header class="modal-card-head">
      <h2 class="modal-card-title">Name</h2>
      <button class="modal-close is-large" @click="$emit('close')"></button>
    </header>
    <section class="modal-card-body">
        <validation-provider v-slot="{ errors }" rules="required">
            <b-field label="Name"
                     :type="{ 'is-danger': errors.length }"
                     :message="errors + [ '&nbsp;' ]">
              <b-input v-model="name"></b-input>
            </b-field>
          </validation-provider>
    </section>
    <footer class="modal-card-foot buttons is-right">
        <button class="button" type="button" @click="cancel">Cancel</button>
        <button class="button is-success"
                @click="handleSubmit(submit)">Update</button>
    </footer>
  </div>
</validation-observer>

And screenshot

enter image description here

a comment that helped to understand enter link description here

user_160588550
Related