HTML Modal 模态框样例

最新推荐文章于 2024-05-21 18:34:13 发布

原创最新推荐文章于 2024-05-21 18:34:13 发布 · 4.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#模态框样例

博客主要围绕模态框样例展开，但具体内容缺失。模态框在前端开发中较为常用，可用于弹出提示、表单填写等交互场景。

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

<!-- 模擬彈框 -->
<div class="modal fade" id="create_dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
     style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    ×
                </button>
                <h2 class="modal-title" id="myModalLabel">
                    创建待办任务
                </h2>
            </div>
            <div class="modal-body">
                <!-- 添加内容 -->
                <div class="king-block king-block-bordered">

                    <div class="king-block-content">
                        <form class="form-horizontal" method="POST">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">业务名称：</label>
                                <span class="text-danger mt5 fl">*</span>
                                <div class="col-sm-7">
                                    <select name="" id="bk_biz_modal" class="form-control bk-valign-top">
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">模板类型：</label>
                                <span class="text-danger mt5 fl">*</span>
                                <div class="col-sm-7">
                                    <select id="bk_type_modal" class="form-control bk-valign-top">
                                        <option value="变更发布">变更发布</option>
                                        <option value="扩缩容">扩缩容</option>
                                        <option value="上线类">上线类</option>
                                        <option value="下架类">下架类</option>
                                        <option value="执行维护">执行维护</option>
                                    </select>

                                </div>

                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">模板名称：</label>
                                <span class="text-danger mt5 fl">*</span>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control" id="modal_template_name"/>
                                </div>

                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">操作识别符：</label>
                                <span class="text-danger mt5 fl">*</span>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control" id="dialog_option"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">待办文件</label>
                                <span class="text-danger mt5 fl">*</span>
                                <div class="col-sm-7">
                                    <input type="file" id="file" name="myfile">
                                </div>
                            </div>
                            <div class="form-group" type="hidden">
                                <input type="hidden" class="form-control" id="modal_template_id"/>
                            </div>
                        </form>
                    </div>
                </div>


            </div>
            <div class="modal-footer">
                <button onclick="create_task()" type="button" class="btn btn-primary">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script>
    function show_create_dialog() {
        $("#create_dialog").modal("show");
    }
</script>