随着前端技术的不断发展，前端工程化已成为了开发者们必须要面对的一个问题。在开发过程中，我们经常需要使用 npm 包管理工具来安装和使用各种开源库和插件，npm 包 emplace 就是其中之一。
emplace 是一个为了在 HTML 上方便地呈现对话框和模态框而创建的 npm 包。这个包允许你将任何元素添加到 DOM 的底部而不会破坏你的 HTML，相比于其他弹框库的优点在于可以通过 DOM 操作来进行样式的继承和修改，使你在样式上更加自由。在接下来的文章中，我们将通过该教程来学习如何使用 emplace。
安装 emplace
使用 npm 包管理工具来安装 emplace，只需要使用以下命令：
npm install emplace --save
上面的命令会将 emplace 库安装到你的项目中。
使用 emplace
在安装了 emplace 库后，我们可以在项目中添加需要弹出的元素，我们先假设一个主要的 HTML 代码块：
<div>
<button id="btn">Click Me!</button>
<div id="demo">
<h2>Hello world!</h2>
<p>This is a modal dialog.</p>
<button id="close">Close it</button>
</div>
</div>要使用 emplace 弹出框，我们需要调用 emplace.js 文件，可以通过以下步骤实现：
将
emplace.js添加到您的项目中（示例：./node_modules/emplace/dist/emplace.js）。使用 script 标签将 emplace.js 引入您的 HTML。示例：
<body> ... <script src="./node_modules/emplace/dist/emplace.js"></script> ... </body>
使用 emplace() 函数来弹出模态框。
-- -------------------- ---- ------- ----------- --------- ------- ----- ----------------------- -------- ---- ----- ----------------- ------------- - ---------- --------------------------- ----------------- ------------- - ---- ------- --------------- ----- -------------------------- ------------- --- --------------- ----- ----- ------------------- ------- --------- -- -- ---------------- ------- -- --- ------- --- ------------------------------------------------------------------------- ---- ----------------- ------- ---------------------------------------- - ------------------------------------------------------------------------------ -------- ------------------------------------------------------------------------------------------------------------------------