レイヤーのレイアウトフレームワークのポップアップレイヤーの使用方法

1年 ago
夏樹, 風
1 minute

レイアウトフレームワークのポップアップ（layer）は、次の手順を使用して行うことができます。

  1. HTMLファイルにLayuiのスタイルとスクリプトファイルを含めます：
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
  1. ポップアップの表示をトリガーするボタンまたはその他の要素を作成する
<button id="demo">点击打开弹出层</button>
  1. JavaScriptファイルでLayuiを初期化：
layui.use(['layer'], function() {
var layer = layui.layer;
});
  1. ボタンクリックイベントハンドラ関数を記述し、レイヤーのポップアップメソッドを呼び出します。
layui.use(['layer'], function() {
var layer = layui.layer;
document.getElementById('demo').onclick = function() {
layer.open({
title: '弹出层标题',
content: '弹出层内容',
btn: '关闭',
yes: function(index, layero) {
layer.close(index);
}
});
};
});

上記コードでは、layer.open()メソッドでポップアップレイヤーを開きます。 異なるパラメータを渡すことで、異なる効果を実現できます。 この中で、titleパラメータはポップアップレイヤーのタイトルを設定するために使用され、contentパラメータはポップアップレイヤーの内容を設定するために使用され、btnパラメータはポップアップレイヤーのボタンのテキストを設定するために使用され、yesパラメータはボタンをクリックしたときのコールバック関数で、ポップアップレイヤーを閉じるために使用されます。

  1. HTMLファイルを動作させ、ボタンをクリックするとポップアップウィンドウが表示されます。

ここではLayuiフレームワークのポップアップ層（layer）の基本的な使用方法を示します。必要に応じて、異なるパラメーターを設定して、より充実したポップアップ層効果を実現できます。

bannerAds