介绍
ci-modals 是一个基于 Bootstrap 的模态框插件，具有高度可配置的特性并且易于使用。本文将为您介绍如何使用 ci-modals。
安装
你可以使用 npm 安装 ci-modals：
npm install ci-modals --save
或者使用 yarn：
yarn add ci-modals
或者手动下载 ci-modals 并引入。
使用
引入 CSS
在 HTML 的 head 中引入 Bootstrap 样式和 ci-modals 的样式：
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="./node_modules/ci-modals/dist/ci-modals.min.css">
引入 JavaScript
在页面底部引入 jQuery、Bootstrap 和 ci-modals 的 JavaScript 文件：
<script src="./node_modules/jquery/dist/jquery.min.js"></script> <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <script src="./node_modules/ci-modals/dist/ci-modals.min.js"></script>
创建模态框
在 HTML 中创建模态框的模板（模板 id 必须以“ci-”开头），如：
-- -------------------- ---- -------
---- --------------------- ------------ ----- ------------- ------------- ------------------------------ -------------------
---- ---------------------
---- ----------------------
---- ---------------------
------- ------------- ------------- -------------------- -----------------------------
--- ------------------- ---------------------------
------
---- -------------------
-----------
------
---- ---------------------
------- ------------- ---------- ------------ --------------------------------
------- ------------- ---------- ------------------------
------
------
------
------调用 ci-modals
在 JavaScript 中初始化并打开模态框：
-- -------------------- ---- -------
---------------------------------
--------- --------- -- --------------------------- ----------------- --------------- ----------
--------- ----- -- -------------
------- ------ -- ------ --- -- ------------
------------- --- -- -------------------- ---- ---------- --- ----- ------ - ---- ----- ----
------------ ----- -- ---------
----------- -------- ------- -- -----
----------------- ----- -- --------
---------- ----- -- ---------
----------------- -------- --------- -- ----------- ------ --- ---- ---
------------ ----- -- ---------
--------- ----- -- ---- -- --
------------- ----- -- -- ----
-------------- ---- ------------- -- -- -- -----
------------- ----- -- ---- ------ --
----------------- --------- -- ------ ----
------------------ ---- ------------- -- ------ -- -----
------------ -------- -- ---------------------- - --------
----------- ---------- --- -- -- -- --------
--------------- ---------- --- -- -- ------ --------
------------- ---------- --- -- -----------
-------------- ---------- -- -- -----------
---
---------------------------------------- -- -----
---------------------------------------- -- -----示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ------------
----- ---------------- -----------------------------------------------------------
----- ---------------- -------------------------------------------------------
-------
------
---- ------------------
------------- ---------
------- ----------------- ---------- ---------------------------
------
---- --------------------- ------------ ----- ------------- ------------- ------------------------------ -------------------
---- ---------------------
---- ----------------------
---- ---------------------
------- ------------- ------------- -------------------- -----------------------------
--- ------------------- ---------------------------
------
---- -------------------
-----------
------
---- ---------------------
------- ------------- ---------- ------------ --------------------------------
------- ------------- ---------- ------------------------
------
------
------
------
------- --------------------------------------------------------
------- -----------------------------------------------------------------
------- --------------------------------------------------------------
--------
--------------------------------- -- -
---------------------------------
--------- -----
--------- -----
------- ------
------------- ---
------------ -----
----------- -------- -------
----------------- -----
---------- -----
----------------- -------- ---------
------------ -----
--------- -----
------------- -----
------------- -----
----------------- ---------
------------ --------
----------- ---------- -
----------- -----
--
--------------- ---------- -
----------- ---------
--
------------- ---------- -
----------------------
--
-------------- ---------- -
----------------------
-
---
----------------------------------------
---
---------
-------
-------指导意义
ci-modals 是一个非常好用的模态框插件，不仅易于使用，而且具有高度可配置的特性。其中的配置参数和回调函数也是让你的开发效率和设计可玩性极高的利器。我们希望这篇文章可以帮助大家更好地使用 ci-modals，并且为开发者提供更好的开发与设计思路。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005606f81e8991b448de96c