Heim > Web-Frontend > js-Tutorial > Hauptteil

Tutorial zur Verwendung des Ebenen-Popup-Plug-Ins

Y2J
Freigeben: 2017-05-22 13:26:00
Original
3453 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Betriebsmethode des Layer-Popup-Plug-Ins vorgestellt und die spezifischen Schritte und Betriebstechniken zum Herunterladen, Aufrufen und Einrichten des Layer-Popup-Plug-Ins anhand von Beispielen detailliert analysiert Bei Bedarf kann darauf verwiesen werden

Das Beispiel in diesem Artikel beschreibt die Funktionsweise des Layer-Popup-Plug-Ins. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

1. Gehen Sie zuerst zu layer.layui.com/, um das Plug-in herunterzuladen

2 die Website

3. Bedienung

<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>
Nach dem Login kopieren

Mobiltelefon-Popup-Effekte

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

Weitere Popup-Effekte

Besonderer Hinweis : Ereignisse müssen von Ihnen selbst gebunden werden. Nachfolgend wird nur der Aufrufcode angezeigt.

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

[Verwandte Empfehlungen]

1. Kostenloses Javascript-Video-Tutorial

2. JS-Entwicklung mit Baidu-Kartencode Organisieren

3. Verwenden Sie node.js, um die URL-Ausgabedatei zu analysieren und an den Client zu senden

4. JavaScript löst das Problem der Konvertierung von Chinesisch Zeichen zu Pinyin im Detail

5. Teilen Sie 15 häufig verwendete js-reguläre Ausdrücke

Das obige ist der detaillierte Inhalt vonTutorial zur Verwendung des Ebenen-Popup-Plug-Ins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!