新增修改共用模态框

新增修改共用模态框

这里建的模态框用的是bootstrap-4.1.3-dist css封装的类modal和fade实现的
modal类他是自带隐藏属性display:none的就是将整个布局隐藏起来
再通过某些事件触发布局的显示形成模态框的效果
刚开始设置了modal和fade这两个类时给页面添加的属性如下图
在这里插入图片描述
然后通过做新增修改时给新增修改按钮添加点击事件触发模态框的布局显示
也就是给模态框添加bootstrap-4.1.3-dist js封装的方法modal(“show”)
在这里插入图片描述
他自带display:block属性将模态框布局显示出来如下图
在这里插入图片描述
上面讲的是模态框的制作下面就来讲制作好的模态框
给新增修改共用的原理和常见问题
由于新增和修改数据的方法是不一样的所以共用模态框不区分开来新增和修改
肯定会出现问题的,但是怎么区分呢?
因为新增和修改除了实现的代码不同外修改比新增还多了个数据回填
数据回填是让你清楚的看到修改的是哪条数据同时也是区分新增和修改的关键
你只要在form表单里面添加一个隐藏域也就是给他添加一个隐藏起来的input标签
在这里插入图片描述
他是用来接收数据回填时的ID数据的,因为他是隐藏的同时又进行了数据回填<

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值