Use portal for modals

src/components/account_actions/account_actions.vue

@@ -59,8 +59,9 @@
         </button>
       </template>
     </Popover>
+    <portal to="modal">
       <confirm-modal
-      :showing="showingConfirmBlock"
+        v-if="showingConfirmBlock"
         :title="$t('user_card.block_confirm_title')"
         :confirm-text="$t('user_card.block_confirm_accept_button')"
         :cancel-text="$t('user_card.block_confirm_cancel_button')"
@@ -77,6 +78,7 @@
           />
         </i18n>
       </confirm-modal>
+    </portal>
   </div>
 </template>
 

src/components/confirm_modal/confirm_modal.js

@@ -11,12 +11,7 @@ const ConfirmModal = {
   components: {
     DialogModal
   },
-  data: {
-  },
   props: {
-    showing: {
-      type: Boolean
-    },
     title: {
       type: String
     },

src/components/confirm_modal/confirm_modal.vue

@@ -1,6 +1,5 @@
 <template>
   <dialog-modal
-    v-if="showing"
     class="confirm-modal"
     :on-cancel="onCancel"
   >

src/components/desktop_nav/desktop_nav.vue

@@ -167,8 +167,9 @@
         </a>
       </div>
     </div>
+    <portal to="modal">
       <confirm-modal
-      :showing="showingConfirmLogout"
+        v-if="showingConfirmLogout"
         :title="$t('login.logout_confirm_title')"
         :confirm-text="$t('login.logout_confirm_accept_button')"
         :cancel-text="$t('login.logout_confirm_cancel_button')"
@@ -177,6 +178,7 @@
       >
         {{ $t('login.logout_confirm') }}
       </confirm-modal>
+    </portal>
   </nav>
 </template>
 <script src="./desktop_nav.js"></script>

src/components/extra_buttons/extra_buttons.vue

@@ -124,9 +124,10 @@
           class="fa-scale-110 fa-old-padding"
           icon="ellipsis-h"
         />
-      </button>
+      </span>
+      <portal to="modal">
         <ConfirmModal
-        :showing="showingDeleteDialog"
+          v-if="showingDeleteDialog"
           :title="$t('status.delete_confirm_title')"
           :cancel-text="$t('status.delete_confirm_cancel_button')"
           :confirm-text="$t('status.delete_confirm_accept_button')"
@@ -135,6 +136,7 @@
         >
           {{ $t('status.delete_confirm') }}
         </ConfirmModal>
+      </portal>
     </template>
   </Popover>
 </template>

src/components/follow_button/follow_button.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <button
     class="btn button-default follow-button"
     :class="{ toggled: isPressed }"
@@ -8,9 +7,9 @@
     @click="onClick"
   >
     {{ label }}
-    </button>
+    <portal to="modal">
       <confirm-modal
-      :showing="showingConfirmUnfollow"
+        v-if="showingConfirmUnfollow"
         :title="$t('user_card.unfollow_confirm_title')"
         :confirm-text="$t('user_card.unfollow_confirm_accept_button')"
         :cancel-text="$t('user_card.unfollow_confirm_cancel_button')"
@@ -27,7 +26,8 @@
           />
         </i18n>
       </confirm-modal>
-  </div>
+    </portal>
+  </button>
 </template>
 
 <script src="./follow_button.js"></script>

src/components/mobile_nav/mobile_nav.vue

@@ -76,8 +76,9 @@
       ref="sideDrawer"
       :logout="logout"
     />
+    <portal to="modal">
       <confirm-modal
-      :showing="showingConfirmLogout"
+        v-if="showingConfirmLogout"
         :title="$t('login.logout_confirm_title')"
         :confirm-text="$t('login.logout_confirm_accept_button')"
         :cancel-text="$t('login.logout_confirm_cancel_button')"
@@ -86,6 +87,7 @@
       >
         {{ $t('login.logout_confirm') }}
       </confirm-modal>
+    </portal>
   </div>
 </template>
 

src/components/retweet_button/retweet_button.vue

@@ -33,8 +33,9 @@
     >
       {{ status.repeat_num }}
     </span>
+    <portal to="modal">
       <confirm-modal
-      :showing="showingConfirmDialog"
+        v-if="showingConfirmDialog"
         :title="$t('status.repeat_confirm_title')"
         :confirm-text="$t('status.repeat_confirm_accept_button')"
         :cancel-text="$t('status.repeat_confirm_cancel_button')"
@@ -43,6 +44,7 @@
       >
         {{ $t('status.repeat_confirm') }}
       </confirm-modal>
+    </portal>
   </div>
 </template>
 

src/components/user_card/user_card.vue

@@ -295,8 +295,9 @@
         :handle-links="true"
       />
     </div>
+    <portal to="modal">
       <confirm-modal
-      :showing="showingConfirmMute"
+        v-if="showingConfirmMute"
         :title="$t('user_card.mute_confirm_title')"
         :confirm-text="$t('user_card.mute_confirm_accept_button')"
         :cancel-text="$t('user_card.mute_confirm_cancel_button')"
@@ -313,6 +314,7 @@
           />
         </i18n>
       </confirm-modal>
+    </portal>
   </div>
 </template>