前端弹窗推荐一个好用的组件

以前我写前端的时候都是直接使用alert进行弹窗,有点点硬核,这里记录一个比较好用的组件,不知道他的功能到底有多少,但是他的弹窗我用的最多,就记下来以后再次做弹窗也可以继续使用。

layer

一款jquery的弹出层组件,非常好用。
常用的方式有:

1.普通弹出一个窗口

layer.alert('内容')

我们可以设置一些属性内容,比如

layer.alert('内容', {
	icon: 1,
	offset: "200px",
	title: '提示'
});

icon为弹出窗的图标,有0-7八种,每种的样式都不一样,可以自行去官网选择,
offset表示大小
title表示弹出窗的标题
同时他的属性还有很多,接下来继续说:

2、弹出一个双按钮选择框

layer.confirm('是否删除该条数据?', {
	icon: 0,
	offset: "200px",
	title: '温馨提示'
}

这个会出现一个选择是否的窗口,而此时我们就可以使用他的另外的属性了,比如yes

layer.confirm('是否删除该条数据?', {
	icon: 0,
	offset: "200px",
	title: '温馨提示'
	yes:function(){
		console.log("点击了是")
	}
}

yes表示点击了是的属性,可以使用回调函数,进行后续操作,这一点还是非常方便的

其他的属性可以去官网看看,而我们使用layer只需要引入他的js就可以了

<script src="/mystatic/js/plugins/layer/layer.min.js"></script>

可以将它下载下来放在你的项目里。
下载地址:(我的码云)
js下载
官网地址:
layer.js官网

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以帮您回答关于前端开发的问题。对于弹窗组件,您可以使用原生 JavaScript 来创建一个模态框,并利用相关的 CSS 样式进行美化。您可以参考以下示例代码: HTML 代码: ``` <button id="myBtn">打开弹窗</button> <div id="myModal" class="modal"> <div class="modal-content"> <span class="close">×</span> <p>这是一个模态框。请在此处添加你的内容。</p> </div> </div> ``` CSS 代码: ``` .modal { display: none; position: fixed; z-index: 10; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5); } .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } ``` JavaScript 代码: ``` var modal = document.getElementById("myModal"); var btn = document.getElementById("myBtn"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } ``` 以上就是一个简单的模态框代码实现。当点击按钮时,模态框会弹出显示。当点击关闭按钮或模态框的任意位置时,模态框会关闭隐藏。您可以根据自己的需求进一步优化这个组件。希望对您有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值