[Salesforce组件开发][LWC] 弹出框开发

前言：

LWC（Lightning Web Component）是使用HTML和现代JavaScript构建的自定义HTML元素。基于在浏览器中本地运行的代码构建的，因此它是轻量级的，并具有出色的性能。在Salesforce的Lightning系统中，它十分常见，并且为SF官方推荐的下一代开发框架。Salesforce致力于开发开放的Web标准，并且是World Wide Web联盟（W3C）的成员。

弹出框概念 （Modals）

在页面App中，弹出框可以说是十分常见的Case，很多操作都会用到它，因为弹出框相对而言比较复杂，所以它并不在lwc提供的自定义标签中。因此，我们在进行lwc的弹出框开发的过程中，需要参照LDS（Lightning Design System）。
最基本的标准Lightning样式弹出框长这个样子：

整个弹出框组件分为两大部分，弹出框部分又分三个小部分

• 弹出框（modal）
  • 头部（head）
  • 主体（body）
  • 尾部（footer）
• 背景 （back-drop）

弹出框需要将用户的注意力全部暂时集中到屏幕中央，因此，弹出框弹出之后，背景将变得不可用，弹出框需要置于屏幕正中央，占据一个合理的大小位置。
以上的分析是如果我们从无到有开发一个弹出框需要考虑的，但是LDS已经帮我们做好标准化样式和各种标签的开发了，我们只需要把LDS中Modal的代码基础上进行自定义开发即可。

自定义开发

在我们的Project中新建一个LWC组件。

弹出框需要通过按钮、区域、图标等的点击事件唤起，所以我们需要在html文件中写一个呼起弹出框的元素，这边我们简单写一个按钮，然后把modal的标准代码也拷贝进我们的html代码里。

<template>
    <lightning-button label="Modal" onclick={showModal}></lightning-button>
    <template if:true={show}>
    <!-- Modal 标准代码部分 -->
        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
            <header class="slds-modal__header">
            <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
            <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
            </svg>
            <span class="slds-assistive-text">Close</span>
            </button>
            <h2 id="modal-heading-01" class