Bootstrap 弹出输入框

效果

原理

引入 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">&times;</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>

Bootstrap 弹出输入框相关推荐

学习使用Bootstrap弹出框Popover提示框样式
学习使用Bootstrap弹出框Popover提示框样式注意事项弹出方向失去焦点隐藏禁用元素弹出提示框 data属性详解 js方法与事件方法: 事件: 注意事项 popover提示框组件依赖 ...
jsp点击按钮弹出输入框_按键精灵UI界面的输入框原来是这样使用的
金猪脚本(原飞猪脚本)以按键精灵教学为主,涉及UiBot,Python,Lua等脚本编程语言,教学包括全自动办公脚本,游戏辅助脚本,引流脚本,网页脚本,安卓脚本,IOS脚本,注册脚本,点赞脚本,阅读脚 ...
Android开发中EditText获得焦点弹出输入框改变屏幕布局的问题
在Android开发中,比较头疼的问题就是EditText总是已启动就获得焦点并弹出输入框,感觉很是不爽.而且,因为输入框的弹出,导致屏幕布局获得改变,有些空间被挤压到一起,很是难看,所以,我就上网搜 ...
第二百四十六节，Bootstrap弹出框和警告框插件
Bootstrap弹出框和警告框插件学习要点: 1.弹出框 2.警告框本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一．弹出框弹出框即点击一个元素弹出一个包含标题和内容的 ...
解决IDEA GIT密码输入错误后，报Authentication failed ... 不再弹出输入框，提交更新失败
IDEA GIT密码输入错误后,不再弹出输入框,提交更新失败,此时可以到windows凭据中去修改. 方法一: 开始菜单 >> 点击用户头像 >> 在左侧选择"管理你 ...
Bootstrap 弹出提示插件Popover 的选项
选项 Bootstrap为工具提示插件提供了 8 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置.见表 5‑5: 表 5‑5 popover插件的选项名称类型默认值 ...
Bootstrap 弹出提示插件popover 的使用方法
弹出提示弹出提示是工具提示的子类,它比工具提示多了一个 content 参数,是工具提示插件的拓展. 弹出提示插件需要 bootstrap-popover.js 文件支持,在使用该插件之前,应该导入 ...
android 键盘遮盖输入框_android弹出输入框,软键盘挡住部分编辑框
公司要做一款类似微信的即时通讯app 现有如下需求: 当edittext获取到焦点,弹出输入框,并且将listview(recyclerview)顶上去类似微信QQ的效果,如下图所示 editTex ...
Bootstrap弹出层(modal)垂直居中简单解决方案(无需修改js)
Bootstrap弹出层(modal)垂直居中简单解决方案(无需修改js) 参考文章: (1)Bootstrap弹出层(modal)垂直居中简单解决方案(无需修改js) (2)https://www. ...

Bootstrap 弹出输入框

效果

原理

代码

js

html

Bootstrap 弹出输入框相关推荐

最新文章

热门文章