模态框的弹出

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术:VS 与bootstrap

作者:梁英豪

撰写时间:2019年6月8日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

模态框的弹出

今天呢!我就来练习一下模态框的弹出,模态框的弹出对大家来说都不陌生了。

因为在现实的生活中,都有很多群众都会接触过网络,在网络里往往是离不开模态框的弹出的。为什么这样讲呢?说了这么多知道模态框是怎么弹出吗?

其实就是从一个按钮引发的事件。

一个按钮往往就是按下去就会有下一步的事件发生,例如:微信里的微信红包。

也是从一个按钮触发的事件,点中那个红包框就会弹出一个红包是否打开。如果打开就可以抢到里面的福利,如果不打开就有一个X在右上角取消,因为避免点错,也会有一个往回的余地。因为避免抢到别人的红包。

虽然我这次没有做这个技术点,但是我做了一个别的模态框弹出。

接下来我就来尝试一下,是否可以把一个本人设置好的表格弹出来呢?就一步一步的来写。

第一步就来设置好按钮。并且把按钮添加一个方法。这个方法是用来弹出模态窗体用的。

虽然这次有三个模态框的弹出,但是只要是把一个模态框弹出就已经有点基础了。说明还是有能力继续做下去吧。接下来就是弹出模态框的表格ID了。

第二步就是上面所说弹出模态框就需要一个ID。但是一个模态框对应一个ID。如果按钮的ID或者模态框的方法名称一样的话就会弹出同一个表格或者同一个页面。因为ID是唯一的。

第三步就是在模态框里面写表格。这个表格也是一个一个的打出来。毕竟做的是弹出自做的表格,所以表格里的内容也是自做的。

由于有页面的限制 就只是弹出一个表格的内容请谅解。这样就能把“起始发票”这个模态框弹出来了。但是我觉得按钮前面没有什么修饰所以我就加多了一个阶段。

第四步就是按钮旁边加图标。图标要怎么才能加在按钮的旁边呢?其实这个插件也是很普通。但是里面有很多有趣的图标。

如果要加图标的话就直接在按钮前面加上一个i 标签。zi_buddhas其实是一个图标的名称,后面就是设置图标的大小还有颜色。这次由于是个人爱好,就搞一下事情。以后到真的工作,就不会这么捣蛋了。要不给大家看看一下样式。

这些都是其它按钮的样式。虽然没有把按钮一个个的写出来,但是希望大家会理解的。本人的技术点就这么多了。

但是还没有看到表格的样式啊!现在有人如你所愿吧!这次设置的表格就是那个 “起始发票”这个按钮上。点击那个按钮就会弹出一个模态窗体。这个窗体就是上面代码所建造出来的。

样式就是这样了。虽然还是觉得简陋一些但这可能也是能力范围之内了吧!希望经过这次的练习,能找到更简单的方式去建设表格。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这是一个基于Bootstrap 4的模态框弹出效果的示例代码: HTML代码: ```html <!-- 模态框弹出按钮 --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 弹出模态框 </button> <!-- 模态框弹出窗口 --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="myModalLabel">模态框标题</h5> <button type="button" class="close" data-dismiss="modal" aria-label="关闭"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>这里是模态框的内容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div> </div> ``` CSS代码: ```css /* 设置模态框弹出窗口的样式 */ .modal-dialog { max-width: 600px; } /* 设置模态框标题的样式 */ .modal-header { background-color: #007bff; color: #fff; } /* 设置模态框关闭按钮的样式 */ .modal-header .close { color: #fff; } /* 设置模态框保存按钮的样式 */ .modal-footer .btn-primary { background-color: #007bff; border-color: #007bff; } /* 设置模态框关闭按钮和保存按钮之间的间距 */ .modal-footer .btn-secondary { margin-right: 10px; } ``` JavaScript代码: ```javascript // 初始化模态框 $('#myModal').modal({ backdrop: 'static', keyboard: false, show: false }); ``` 这段代码中,我们使用了Bootstrap 4的模态框组件来实现弹出效果。我们首先创建了一个按钮,设置了data-toggle和data-target属性,这两个属性用于触发模态框弹出。然后,我们创建了一个模态框弹出窗口,设置了id属性和aria-labelledby属性,这两个属性用于指定模态框的唯一标识和标题。在模态框弹出窗口中,我们分别创建了模态框的标题、内容和底部按钮。最后,我们使用JavaScript代码来初始化模态框,设置了backdrop、keyboard和show属性,这些属性用于控制模态框的行为。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值