Bootstrap 弹出输入框

柔光的暖阳◎ 2022-05-18 01:42 345阅读 0赞

## 效果 ##

![这里写图片描述][70]

## 原理 ##

*  引入 `Bootstrap` 和 `jQuery`
 *  在 `弹框` 中加入输入框，同时 `自动获得焦点`
 *  在 `点击确定` ，获取 `输入框的值` ，进行相应流程操作

## 代码 ##

### js ###

// 修改弹出框的title, 显示弹框
            function ShowCreateModal(title){ 
                $("#createFileTitle").text(title);
                $('#createFileMModal').modal('show');
            }
            // 关闭弹框， 获取输入值，然后执行逻辑
            $("#createFileSureBut").click(function (){ 
                $("#createFileMModal").modal("hide");
                var inputFileName = $("#fileName").val();
                console.log("input file name : " + inputFileName);
            });

### html ###

<div class="modal fade" id="createFileMModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="createFileTitle">创建文件</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="fileName" class="col-form-label">文件名</label>
                <input type="text" autofocus class="form-control" id="fileName">
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" id="createFileSureBut">确定</button>
          </div>
        </div>
      </div>
    </div>

[70]: /images/20220518/eda2fcfec40a4aad810dc74c25178c9a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，345人围观）

还没有评论，来说两句吧...

相关阅读

相关 Angular6 弹出模态框 ngx-bootstrap

首先下载ngx-bootstrap npm install ngx-bootstrap --save 然后如果需要加载 bootstrap 样式，还需要下载 bootstr

淡淡的烟草味﹌/ 2023年06月22日 05:28/ 0 赞/ 3 阅读

相关 Bootstrap教程(15)--警告框、弹出框、工具提示框

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 概述 2. 警告框 2.1 普通警告框 2.2

客官°小女子只卖身不卖艺/ 2022年11月01日 00:59/ 0 赞/ 486 阅读

相关学习使用Bootstrap弹出框Popover提示框样式

学习使用Bootstrap弹出框Popover提示框样式注意事项弹出方向失去焦点隐藏禁用元素弹出提示框

女爷i/ 2022年09月10日 10:25/ 0 赞/ 237 阅读

相关 bootstrap弹出框

要想使用Bootstrap Popover（弹出框）则必须引入其依赖的文件: jquery.js这个必须的(还是要写在其他js前面,bootstrap是依赖jquery的哦)

约定不等于承诺〃/ 2022年08月23日 14:00/ 0 赞/ 364 阅读

相关 bootstrap 点击空白处popover弹出框隐藏

代码： <div> <a class="btn btn-success show" title="Popover title" data-co

旧城等待，/ 2022年06月02日 08:41/ 0 赞/ 345 阅读

相关 Bootstrap 弹出输入框

效果 ![这里写图片描述][70] 原理引入 `Bootstrap` 和 `jQuery` 在 `弹框` 中加入输入框，同时 `自动获得焦点`

柔光的暖阳◎/ 2022年05月18日 01:42/ 0 赞/ 346 阅读

相关基于bootstrap的弹出框实例

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

旧城等待，/ 2022年04月23日 12:58/ 0 赞/ 305 阅读

相关 bootstrap弹出框不显示EasyUI dataGrid数据

修改弹出框为bootstrap弹出框 bootstrap弹出框不显示EasyUI dataGrid数据：解决办法，在 dataGrid加载前加上代码： $('

太过爱你忘了你带给我的痛/ 2022年04月18日 03:27/ 0 赞/ 339 阅读

相关 js弹出输入框

分享一下我老师大神的人工智能教程！零基础，通俗易懂！[http://blog.csdn.net/jiangjunshow][http_blog.csdn.net_jiangju

逃离我推掉我的手/ 2022年04月17日 06:13/ 0 赞/ 443 阅读

相关 jQuery+Bootstrap美化弹出框

项目中很多弹出的警告框是通过alert()弹出的浏览器警告框，样式比较丑陋且和页面使用的Bootstrap框架样式不吻合，因此需要修改弹出框样式。采用jQuery+Boot

- 日理万妓/ 2022年04月11日 09:54/ 0 赞/ 919 阅读