最容易学习的CSS框架

目前主流web前端框架比较

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)