Tutoriel sur l'utilisation du plug-in contextuel de calque

Cet article présente principalement la méthode de fonctionnement du plug-in contextuel de couche et analyse en détail les étapes spécifiques et les techniques de fonctionnement du téléchargement, de l'appel et de la configuration du plug-in contextuel de couche avec des exemples. ceux qui en ont besoin peuvent s'y référer

L'exemple de cet article décrit la méthode de fonctionnement du plug-in contextuel de couche. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

1. Allez d'abord sur layer.layui.com/ pour télécharger le plug-in

2. le site Web

3. Comment faire fonctionner

<script src="../js/layer/layer.js"></script>
<script>
function openadd()
{
   $str=$("#addModal").html();//加载弹窗内容
   layer.open({
    type: 1,        //弹窗类型
    title: &#39;显示标题&#39;,   //显示标题 
    closeBtn: 1,     //是否显示关闭按钮
    shadeClose: true, //显示模态窗口
    skin: &#39;layui-layer-rim&#39;, //加上边框
    area: [&#39;600px&#39;, &#39;440px&#39;], //宽高
    content: $str //弹窗内容
  });
}
</script>
<p id="addModal">
要弹窗显示的内容
</p>

Effets pop-up pour téléphone portable

//弹窗后两秒自动关闭
layer.open({ 
content: '通过style设置你想要的样式', 
style: 'background-color:#09C1FF; color:#fff; border:none;', 
time: 2 
});
//弹窗后点击关闭
layer.open({ 
  btn: ['关闭'], 
  content:'内容' 
})

Plus d'effets pop-up

Remarque spéciale : Les Événements doivent être liés par vous-même. Seul le code d'appel est indiqué ci-dessous.

//初体验
layer.alert('内容')
//第三方扩展皮肤
layer.alert('内容', {
 icon: 1,
 skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
})
//询问框
layer.confirm('您是如何看待前端开发？', {
 btn: ['重要','奇葩'] //按钮
}, function(){
 layer.msg('的确很重要', {icon: 1});
}, function(){
 layer.msg('也可以这样', {
  time: 20000, //20s后自动关闭
  btn: ['明白了', '知道了']
 });
});
//提示层
layer.msg('玩命提示中');
//墨绿深蓝风
layer.alert('墨绿风格，点击确认看深蓝', {
 skin: 'layui-layer-molv' //样式类名
 ,closeBtn: 0
}, function(){
 layer.alert('偶吧深蓝style', {
  skin: 'layui-layer-lan'
  ,closeBtn: 0
  ,shift: 4 //动画类型
 });
});
//捕获页
layer.open({
 type: 1,
 shade: false,
 title: false, //不显示标题
 content: $('.layer_notice'), //捕获的元素
 cancel: function(index){
  layer.close(index);
  this.content.show();
  layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
 }
});
//页面层
layer.open({
 type: 1,
 skin: 'layui-layer-rim', //加上边框
 area: ['420px', '240px'], //宽高
 content: 'html内容'
});
//自定页
layer.open({
 type: 1,
 skin: 'layui-layer-demo', //样式类名
 closeBtn: 0, //不显示关闭按钮
 shift: 2,
 shadeClose: true, //开启遮罩关闭
 content: '内容'
});
//tips层
layer.tips('Hi，我是tips', '吸附元素选择器，如#id');
//iframe层
layer.open({
 type: 2,
 title: 'layer mobile页',
 shadeClose: true,
 shade: 0.8,
 area: ['380px', '90%'],
 content: 'http://layer.layui.com/mobile/' //iframe的url
}); 
//iframe窗
layer.open({
 type: 2,
 title: false,
 closeBtn: 0, //不显示关闭按钮
 shade: [0],
 area: ['340px', '215px'],
 offset: 'rb', //右下角弹出
 time: 2000, //2秒后自动关闭
 shift: 2,
 content: ['test/guodu.html', 'no'], //iframe的url，no代表不显示滚动条
 end: function(){ //此处用于演示
  layer.open({
   type: 2,
   title: '很多时候，我们想最大化看，比如像这个页面。',
   shadeClose: true,
   shade: false,
   maxmin: true, //开启最大化最小化按钮
   area: ['893px', '600px'],
   content: 'http://fly.layui.com/'
  });
 }
});
//加载层
var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
//loading层
var index = layer.load(1, {
 shade: [0.1,'#fff'] //0.1透明度的白色背景
});
//小tips
layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '吸附元素选择器', {
 tips: [1, '#3595CC'],
 time: 4000
});
//prompt层
layer.prompt({
 title: '输入任何口令，并确认',
 formType: 1 //prompt风格，支持0-2
}, function(pass){
 layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text){
  layer.msg('演示完毕！您的口令：'+ pass +' 您最后写下了：'+ text);
 });
});
//tab层
layer.tab({
 area: ['600px', '300px'],
 tab: [{
  title: 'TAB1', 
  content: '内容1'
 }, {
  title: 'TAB2', 
  content: '内容2'
 }, {
  title: 'TAB3', 
  content: '内容3'
 }]
});
//相册层
$.getJSON('test/photos.json?v='+new Date, function(json){
 layer.photos({
  photos: json //格式见API文档手册页
  ,shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机
 });
});

[Recommandations associées]

1. Tutoriel vidéo gratuit Javascript

2 Développement JS à l'aide du code de carte Baidu Organiser

. 🎜>3.

Utilisez node.js pour analyser le fichier de sortie URL vers le client

4.

JavaScript résout le problème de la conversion des caractères chinois en pinyin en détail

5.

Partagez 15 expressions régulières js couramment utilisées

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!