Problem description

The El-Dialog provided by ele. me UI can be used to customize large scenes, that is, the El-Dialog can hold many things, such as forms, tables, el-tables, el-forms, etc. But sometimes the Google Browser style is correct, and in Internet Explorer, the style will partially fail. So, I think if the scene is not too big, you can use your own pop-up dialog instead of the EL-dialog in the UI. Of course, it doesn’t matter if your project doesn’t have to consider IE compatibility (hopefully IE will be phased out soon).

The end result is as follows

Effect dynamic diagram is not obvious, you can copy the code I posted, run it, it will be more intuitive

The following code

html

<template>
  <div id="app">
    <! Click button callback to control div hide and show -->
    <el-button @click="showDialog">Click to pop up the dialog box</el-button>
    <! Use the Transition animation. It doesn't look too abrupt.
    <transition name="fade">
      <! For the external div, turn on the fixed position and set the width and height to 100%, so that you have a full screen background. Bind a click event to an external div with a full screen, so that when clicked, you can control the full screen to disappear and hide. But if I just write it like this. Clicking on the internal content div will also make the whole thing hidden. Because the event bubbles, clicking on the inner div is the same as clicking on the outer div. @click.stop="fn"; @click.stop="fn"; End the event, do nothing -->
      <div class="dialog" v-if="isShowDialog" @click="outClick">
        <! - < div class = "content" @. Click the stop = "fn" > fn () {return} / / traditional writing -- -- >
        <div class="content" @click.stop>  <! -->Welcome to my blog...<i class="el-icon-close" @click="iconClick"></i> <! -- Internal of course also want to be related to the way off, so add a click to close -->
        </div>
      </div>
    </transition>
  </div>
</template>
Copy the code

js

<script>
export default {
  name: "app".data() {
    return {
      isShowDialog: false}; },methods: {
    showDialog() {
      this.isShowDialog = true;
    },
    outClick(){
      this.isShowDialog = false;
    },
    iconClick(){
      this.isShowDialog = false}}}; </script>Copy the code

css

<style lang="less" scoped>
#app {
  width: 100%;
  height: 100%;
  .dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0.0.0.0.5);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    .content {
      width: 240px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff;
      border-radius: 8px;
      box-sizing: border-box;
      padding: 20px;
      position: relative;
      i {
        font-size: 20px;
        cursor: pointer;
        color: #baf;
        position: absolute;
        top: 8px;
        right: 8px; }}}} // Control the fade-in effect.fade-enter-active..fade-leave-active {
  transition: opacity 0.5 s;
}
.fade-enter..fade-leave-to {
  opacity: 0;
}
</style>
Copy the code

Jot down