npm包native-js-modals使用教程

本文介绍如何使用npm包native-js-modals实现前端页面弹出框功能。

引入native-js-modals

在项目中使用npm管理包，通过npm引入native-js-modals

--- ------- ----------------

使用native-js-modals

使用前需要import native-js-modals，然后进行实例化，然后可以通过实例调用相关方法。

------ -------------- ---- ------------------

----- ------ - --- ----------------

-- --------
------------------- --------

-- ----------
----------------
  -------- --------------
  ------------------ -----
  ----------------- ----
---------- -- -
  -- ---------
----------- -- -
  -- ---------
--

-- ---------
---------------
  -------- -----------
  ------------ ----------
  ------------------ -----
  ----------------- -----
  ---------- ----- -- -
    -- ------------- --- --- -
      ------ --------
    -
    ------ ----
  -
------------- -- -
  -- -----------------
----------- -- -
  -- ---------
--

API文档

alert

---
 - --------
 - ------ -------- ------- -----
 --
--------------

confirm

---
 - ----------
 - ------ -------- ------- --
 - ------ -------- --------------- -----
 - ------ -------- ------------------------- ------
 - ------ -------- ------------------------ ------
 --
----------------

prompt

---
 - ---------
 - ------ -------- ------- --
 - ------ -------- --------------- -----
 - ------ -------- ------------------- ------
 - ------ -------- ------------------------- ------
 - ------ -------- ------------------------ ------
 - ------ ---------- ----------------- ----------------------------------
 --
---------------

示例代码

下面是一个关于如何使用native-js-modals的示例代码。

--------- -----
----- ----------
------
  ----- ----------------
  ---------------------------------
  ------- ----------------------------------------------------------------------------
-------
------
  ------- ------------------------------------------
  ------- ----------------------------------------------
  ------- --------------------------------------------
  --------
    ----- ------ - --- ----------------

    -------- -------------- -
      ------------------- --------
    -

    -------- ---------------- -
      ----------------
        -------- --------------
        ------------------ -----
        ----------------- ----
      ---------- -- -
        ------------------------
      ----------- -- -
        ------------------------
      --
    -

    -------- --------------- -
      ---------------
        -------- -----------
        ------------ ----------
        ------------------ -----
        ----------------- -----
        ---------- ----- -- -
          -- ------------- --- --- -
            ------ --------
          -
          ------ ----
        -
      ------------- -- -
        --------------------------------------- ------
      ----------- -- -
        ------------------------
      --
    -

  ---------
-------
-------

总结

本文介绍了使用npm包native-js-modals实现前端页面弹出框的功能，native-js-modals提供了alert、confirm和prompt三个方法，通过实例化，可以很容易地调用相关方法。同时介绍了API文档和示例代码以供参考。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600559d981e8991b448d75ad

阅读全文

猜你喜欢

  • npm 包 grapp 使用教程

    简介 grapp 是一个基于 React 的图表库，它提供了丰富的图表类型、交互式特性和自定义主题，可以满足大多数数据可视化的需求。 使用 grapp，你可以轻松地创建可交互的数据可视化图表，为业务决...

    2 年前
  • npm包Angular2 Inline Edition 使用指南

    前言 在前端编程中，我们经常需要使用到各种类似表单的控件，用来方便地收集用户输入的数据。而且，我们经常需要在输入框或文本区域内支持快捷的编辑操作，比如：输入框内即点即改、双击后直接进入编辑模式、按下E...

    2 年前
  • npm 包 ts-client-logger 使用教程

    在前端开发中，我们经常需要在代码中打印日志以方便调试。而使用一个好的日志记录工具可以大大提高我们的开发效率，同时也有助于代码的维护和优化。ts-client-logger 是一个基于 TypeScri...

    2 年前
  • npm 包 zetoff-js-helpers 使用教程

    在前端开发过程中，我们经常需要使用一些工具类函数来辅助处理数据和逻辑方面的操作。很多时候这些函数都是可以复用的，因此我们会选择将它们以 npm 包的形式进行封装，以便在需要的时候方便导入和使用。

    2 年前
  • npm 包 axletree-command-create 使用教程

    介绍 axletree-command-create 是一个轻量级的命令行工具，它可以帮助前端开发者快速创建基于 React、Vue 等常用框架的项目脚手架。它可以自动化构建项目结构和基础代码框架，让...

    2 年前
  • npm 包 bsuir-schedule 使用教程

    介绍 bsuir-schedule 是一个 npm 包，主要功能是获取白俄罗斯国家技术大学（BSUIR）的课程表信息。它可以帮助前端开发者快速构建课表查询系统或提供学生教务信息查询服务。

    2 年前
  • npm 包 @cheapsteak/hoxy 使用教程

    前言 在现代化的 Web 开发环境中，借助一些工具来提升开发效率是非常必要的。其中，npm 是一个非常重要的工具，它是一个包管理工具，允许社区成员分享他们编写的程序包（如库、框架和工具等）。

    2 年前
  • npm 包 cluster-synapse 使用教程

    在前端开发的过程中，我们经常需要处理大量的数据和复杂的逻辑操作。为了提高应用的性能，我们通常会使用 Node.js 编写后端代码，在服务器上运行。但是，当服务器负载增加时，单个 Node.js 进程可...

    2 年前
  • npm 包 ilocale 使用教程

    介绍 ilocale 是一个为了方便前端国际化而开发的 npm 包。它可以通过简化接口调用来动态展示多语言文本。 安装 通过 npm 安装 ilocale： --- ------- ------- -...

    2 年前
  • npm 包 log-reporter 使用教程

    介绍 log-reporter 是一款基于 Node.js 平台的 npm 包，用于快速实现日志输出和收集的功能。它提供了灵活的配置和自定义功能，可以方便地适应各种不同的需求。

    2 年前
  • npm 包 kd-editor 使用教程

    在前端开发中，编辑器是不可或缺的一个工具。然而，如果没有一个专门设计的编辑器，前端开发人员就需要自己编写编辑器，这是一项繁琐的任务，需要大量的时间和努力。为了解决这个问题，出现了一个非常好的 npm ...

    2 年前
  • npm 包 convnetjs-ts 使用教程

    在机器学习的领域中，卷积神经网络是一种非常重要的模型。而 convnetjs-ts 是一个由 TypeScript 实现的卷积神经网络库，可以在 Web 端上使用。

    2 年前
  • npm 包 create_event_system 使用教程

    什么是 create_event_system create_event_system 是一个使用 JavaScript 编写的简单事件系统，它可以实现用于在应用程序中进行组件和模块通信的事件分发和监...

    2 年前
  • NPM 包 Kap 使用教程

    Kap 是一款跨平台截屏及录屏工具，通过 npm 包可以在前端项目中使用。本文将会详细介绍 Kap 的安装和使用方法，解释一些常见的问题并提供示例代码。 安装 首先，你需要在本地安装 Kap。

    2 年前
  • npm包hypercalc使用教程

    什么是hypercalc？ HyperCalc是一种JavaScript库，它提供了一个非常强大的、可扩展的计算器系统。它可用于开发各种应用程序，包括货币转换、科学计算、图表绘制等。

    2 年前
  • npm 包 tinyframework 使用教程

    在前端 web 开发中，我们经常需要开发一些小型的 web 应用程序，为此我们需要一个简单易用、灵活性高、易于扩展的前端框架。在这方面，著名的 jQuery 和 Angular.js 及其后继版本都提...

    2 年前
  • npm 包 @2012mjm/telegram-mt-node 的使用教程

    前言 在前端开发中，我们通常需要集成各种第三方的库和框架来提高开发效率和代码质量。其中，npm 是一个非常常用的包管理工具，它提供了很多优秀的开源包和模块。本文将介绍如何使用 @2012mjm/tel...

    2 年前
  • npm 包 "@2012mjm/telegram-tl-node" 使用教程

    简介 "@2012mjm/telegram-tl-node" 是一个用于实现 Telegram TL 协议的 Node.js 模块，封装了从 HTTP 接口获取数据，解析 TL 类型以及拼接 TL 类...

    2 年前
  • npm包 drng使用教程

    简介 在前端开发中，我们不可避免地会遇到需要使用随机数的情况。而 drng 是一个提供了高质量伪随机数的 npm 包。使用 drng 可以丰富我们的应用程序，例如用于游戏开发，数据加密，模拟算法等等。

    2 年前
  • npm 包 sane-net 使用教程

    在前端开发中，Npm 包的使用非常常见。Sane-net 是一个优秀的 Npm 包，它提供了一组完整的网络请求封装方法，可以让开发者轻松地进行 HTTP 请求的发送和处理。

    2 年前

相关推荐

    暂无文章