表格改弹窗界面 | Modal表单使用Layui+js开发

最新推荐文章于 2025-03-18 11:13:21 发布

hooc

最新推荐文章于 2025-03-18 11:13:21 发布

阅读量2.7k

点赞数

分类专栏：前端文章标签：前端 modal from

本文链接：https://blog.youkuaiyun.com/weixin_42237691/article/details/88378212

版权

本文介绍如何利用Layui和JavaScript开发Modal弹窗表单，以替代传统的表格形式，解决iframe弹窗中传值问题。通过实例展示表单样式和相关代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Modal表单使用Layui+js开发

公司需求求职登记表不使用table,计划用一个iframe弹框解决问题,但是iframe弹窗难以解决不同文件的传值问题,多方搜索,应用Modal开发。

样式如下

用Layui实现的表单
Modal弹窗在这里插入图片描述

代码如下

// An highlighted block
<!-- 模态框（Modal）1 -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog" style="width:500px">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
              添加工作经历
            </h4>
          </div>
          <div class="modal-body">
                    <!-- layui部分 -->
                    <div class="layui-form layui-form-pane">
                    <div class="layui-inline">
                        <label class="layui-form-label">工作时间</label>
                        <div class="layui-input-inline" >
                          <input name="gzsj" id="gzsj" autocomplete="off" class="layui-input" type="text" placeholder="请选择您的工作时间">
                        </div>
                      </div>
              
                      <div class="layui-inline">
                          <label class="layui-form-label">单位名称</label>
                          <div class="layui-input-inline" >
                            <input name="dwmc" id="dwmc" lay-verify="name" autocomplete="off" class="layui-input" type="text" placeholder="请输入您的单位名称">
                          </div>
                        </div>
    
                        <div class="layui-inline">
                            <label class="layui-form-label">岗位</label>
                            <div class="layui-input-inline" >
                              <input name="gangwei" id="gangwei" lay-verify="name" autocomplete="off" class="layui-input" type="text" placeholder

最低0.47元/天解锁文章