bulma弹出层(Modal)配套js文件
bulma弹出层(Modal)相关的js
因为是基于jquery,所以需要先引入jquery
https://545c.com/f/930370-489760568-d9adb2 (访问密码:3153)
包含手册三个示例的js,值得一提的是打开按钮我使用了html的新属性data-target="",这个新属性很有意思,如果你不想使用这个属性,可以直接在点击按钮,可以直接将下面的第三个函数
$(".modal-open").click(function() { //alert($(".button").data("target")); var id=$(".modal-open").data("target"); $("#"+id).addClass("is-active"); });
修改为
$("#btnid").click(function() { $("#modalid").addClass("is-active"); });
其中btnid是打开按钮的id,modalid是模态框的id。
如果你不想用id,用类也是可以的,需要把#换成.
无论是id还是类名称,都要求唯一。
完整js
<script src="/static/js/jquery-3.5.1.min.js"></script> <script>$(document).ready(function(){ $(".modal-close").click(function() { $(".modal").removeClass("is-active"); }); $(".modal-background").click(function() { $(".modal").removeClass("is-active"); }); $(".modal-open").click(function() { //alert($(this).data("target")); var id=$(this).data("target"); $("#"+id).addClass("is-active"); }); }); </script>
完整示例包含js和html下载
https://545c.com/f/930370-489939327-317f83 (访问密码:3153)