Heim Web-Frontend js-Tutorial Tutorial zur Verwendung des Ebenen-Popup-Plug-Ins

Tutorial zur Verwendung des Ebenen-Popup-Plug-Ins

May 22, 2017 pm 01:26 PM
弹窗 插件

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!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

PyCharm-Einsteigerhandbuch: Umfassendes Verständnis der Plug-In-Installation! PyCharm-Einsteigerhandbuch: Umfassendes Verständnis der Plug-In-Installation! Feb 25, 2024 pm 11:57 PM

PyCharm ist eine leistungsstarke und beliebte integrierte Entwicklungsumgebung (IDE) für Python, die eine Fülle von Funktionen und Tools bereitstellt, damit Entwickler Code effizienter schreiben können. Der Plug-In-Mechanismus von PyCharm ist ein leistungsstarkes Tool zur Erweiterung seiner Funktionen. Durch die Installation verschiedener Plug-Ins können PyCharm um verschiedene Funktionen und benutzerdefinierte Funktionen erweitert werden. Daher ist es für PyCharm-Neulinge von entscheidender Bedeutung, die Installation von Plug-Ins zu verstehen und zu beherrschen. In diesem Artikel erhalten Sie eine detaillierte Einführung in die vollständige Installation des PyCharm-Plug-Ins.

Fehler beim Laden des Plugins in Illustrator [Behoben] Fehler beim Laden des Plugins in Illustrator [Behoben] Feb 19, 2024 pm 12:00 PM

Erscheint beim Starten von Adobe Illustrator eine Meldung über einen Fehler beim Laden des Plug-Ins? Bei einigen Illustrator-Benutzern ist dieser Fehler beim Öffnen der Anwendung aufgetreten. Der Meldung folgt eine Liste problematischer Plugins. Diese Fehlermeldung weist darauf hin, dass ein Problem mit dem installierten Plug-In vorliegt, es kann jedoch auch andere Gründe haben, beispielsweise eine beschädigte Visual C++-DLL-Datei oder eine beschädigte Einstellungsdatei. Wenn dieser Fehler auftritt, werden wir Sie in diesem Artikel bei der Behebung des Problems unterstützen. Lesen Sie daher weiter unten weiter. Fehler beim Laden des Plug-Ins in Illustrator Wenn Sie beim Versuch, Adobe Illustrator zu starten, die Fehlermeldung „Fehler beim Laden des Plug-Ins“ erhalten, können Sie Folgendes verwenden: Als Administrator

Was soll ich tun, wenn in Win10 keine Popup-Erinnerungen für Kalenderereignisse vorhanden sind? Wie kann ich die Wiederherstellung durchführen, wenn in Win10 keine Erinnerungen an Kalenderereignisse vorhanden sind? Was soll ich tun, wenn in Win10 keine Popup-Erinnerungen für Kalenderereignisse vorhanden sind? Wie kann ich die Wiederherstellung durchführen, wenn in Win10 keine Erinnerungen an Kalenderereignisse vorhanden sind? Jun 09, 2024 pm 02:52 PM

Der Kalender kann Benutzern dabei helfen, Ihren Zeitplan aufzuzeichnen und sogar Erinnerungen festzulegen. Viele Benutzer fragen sich jedoch, was zu tun ist, wenn in Windows 10 keine Erinnerungen an Kalenderereignisse angezeigt werden. Benutzer können zunächst den Windows-Update-Status überprüfen oder den Windows App Store-Cache leeren, um den Vorgang auszuführen. Lassen Sie diese Website den Benutzern die Analyse des Problems, dass die Kalenderereigniserinnerung in Win10 nicht angezeigt wird, sorgfältig vorstellen. Um Kalenderereignisse hinzuzufügen, klicken Sie im Systemmenü auf das Programm „Kalender“. Klicken Sie mit der linken Maustaste auf ein Datum im Kalender. Geben Sie im Bearbeitungsfenster den Namen des Ereignisses und die Erinnerungszeit ein und klicken Sie auf die Schaltfläche „Speichern“, um das Ereignis hinzuzufügen. Lösung des Problems, dass die Erinnerung an Win10-Kalenderereignisse nicht angezeigt wird

Was ist das Installationsverzeichnis der Chrome-Plug-in-Erweiterung? Was ist das Installationsverzeichnis der Chrome-Plug-in-Erweiterung? Mar 08, 2024 am 08:55 AM

Was ist das Installationsverzeichnis der Chrome-Plug-in-Erweiterung? Unter normalen Umständen lautet das Standardinstallationsverzeichnis von Chrome-Plug-In-Erweiterungen wie folgt: 1. Der Standard-Installationsverzeichnis-Speicherort von Chrome-Plug-Ins in Windows XP: C:\DocumentsandSettings\Benutzername\LocalSettings\ApplicationData\Google\Chrome\UserData\ Default\Extensions2. Chrome in Windows7 Der Standardinstallationsverzeichnisspeicherort des Plug-Ins: C:\Benutzer\Benutzername\AppData\Local\Google\Chrome\User

So implementieren Sie Popup-Fenstereffekte mit Vue So implementieren Sie Popup-Fenstereffekte mit Vue Sep 22, 2023 am 09:40 AM

Für die Verwendung von Vue zum Implementieren von Popup-Fenstereffekten sind spezifische Codebeispiele erforderlich. Mit der Entwicklung von Webanwendungen sind Popup-Fenstereffekte in den letzten Jahren zu einer der am häufigsten verwendeten Interaktionsmethoden unter Entwicklern geworden. Als beliebtes JavaScript-Framework bietet Vue umfangreiche Funktionen und Benutzerfreundlichkeit und eignet sich sehr gut für die Implementierung von Popup-Fenstereffekten. In diesem Artikel wird erläutert, wie Sie mit Vue Popup-Fenstereffekte implementieren, und es werden spezifische Codebeispiele bereitgestellt. Zuerst müssen wir mit dem CLI-Tool von Vue ein neues Vue-Projekt erstellen. offenes Ende

Teilen Sie drei Lösungen mit, warum der Edge-Browser dieses Plug-in nicht unterstützt Teilen Sie drei Lösungen mit, warum der Edge-Browser dieses Plug-in nicht unterstützt Mar 13, 2024 pm 04:34 PM

Wenn Benutzer den Edge-Browser verwenden, fügen sie möglicherweise einige Plug-Ins hinzu, um weitere Anforderungen zu erfüllen. Beim Hinzufügen eines Plug-Ins wird jedoch angezeigt, dass dieses Plug-In nicht unterstützt wird. Heute stellt Ihnen der Herausgeber drei Lösungen vor. Methode 1: Versuchen Sie es mit einem anderen Browser. Methode 2: Der Flash Player im Browser ist möglicherweise veraltet oder fehlt, sodass das Plug-in nicht unterstützt wird. Sie können die neueste Version von der offiziellen Website herunterladen. Methode 3: Drücken Sie gleichzeitig die Tasten „Strg+Umschalt+Entf“. Klicken Sie auf „Daten löschen“ und öffnen Sie den Browser erneut.

Unterstützt PyCharm Community Edition genügend Plugins? Unterstützt PyCharm Community Edition genügend Plugins? Feb 20, 2024 pm 04:42 PM

Unterstützt PyCharm Community Edition genügend Plugins? Benötigen Sie spezifische Codebeispiele Da die Python-Sprache im Bereich der Softwareentwicklung immer häufiger verwendet wird, wird PyCharm als professionelle integrierte Python-Entwicklungsumgebung (IDE) von Entwicklern bevorzugt. PyCharm ist in zwei Versionen unterteilt: die professionelle Version und die Community-Version. Die Community-Version wird kostenlos bereitgestellt, die Plug-in-Unterstützung ist jedoch im Vergleich zur professionellen Version eingeschränkt. Die Frage ist also: Unterstützt die PyCharm Community Edition genügend Plug-Ins? In diesem Artikel werden spezifische Codebeispiele verwendet

So fügen Sie dem WordPress-Plugin Online-Bestellfunktionen hinzu So fügen Sie dem WordPress-Plugin Online-Bestellfunktionen hinzu Sep 05, 2023 pm 03:42 PM

So fügen Sie dem WordPress-Plugin eine Online-Bestellfunktion hinzu. Im heutigen digitalen Zeitalter haben sich viele Restaurants und Cafés dafür entschieden, den Bestellvorgang online zu verlagern, um den Bedürfnissen der Kunden gerecht zu werden. WordPress ist ein weit verbreitetes Content-Management-System (CMS) und viele Unternehmen verwenden WordPress zum Erstellen ihrer Websites. In diesem Artikel wird erläutert, wie Sie dem WordPress-Plug-in Online-Bestellfunktionen hinzufügen und entsprechende Codebeispiele bereitstellen. Schritt 1: Wählen Sie das richtige Plugin. Zuerst müssen wir ein benutzerdefiniertes Plugin in WordPress erstellen

See all articles