bootstrap中modal弹出框的使用

modal按钮位置安放：

<button class="btn btn-primary" onclick="edit()" data-toggle="modal" data-target="#myModal"><i class="glyphicon glyphicon-edit"></i> 编辑
</button>

modal框内容设置（表单提交）：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog" style="width: 60%"><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"><div class="row"><form id="form" class="form-horizontal col-lg-offset-1 col-lg-10" roe="form"><div class="form-group"><label class="control-label col-md-3">属性1：</label><div class="col-md-9"><input class="form-control" type="text"required="required"/></div></div><div class="form-group"><label class="control-label col-md-3">属性2：</label><div class="col-md-9"><input class="form-control" type="text"required="required"/></div/></div><div class="form-group"><label class="control-label col-md-3">是否激活：</label><div class="col-md-9"><input type="radio" name="isValid" id="radioyes" value="1" checked style="margin-top:2%"/>是<input type="radio" name="isValid" id="radiono" value="0"/>否</div></div></form></div></div><div class="modal-footer" style="text-align: center"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" id="editbtn" class="btn btn-primary">提交</button></div></div></div>
</div>

转载于:https://www.cnblogs.com/dali-lyc/p/7295885.html

bootstrap中modal弹出框的使用相关推荐

php使用popover,php中bootstrap框架.popover弹出框，鼠标移动到上面自动显示，离开自动消失...
$(function(){//显示弹出框 $("[rel=name]").popover({ trigger:'manual', placement : 'bottom', //p ...
jquery weui 中alert弹出框在ios中跳动问题
问题描述: jquery-weui中的弹出框在ios上会有一个右下角向中间滑动的效果,在Android上没有这个效果. 解决方法: 修该jquery-weui.js中的openModal方法如下图: ...
element-ui中$confirm弹出框的确定和取消按钮互换位置
element-ui中$confirm弹出框的确定和取消按钮互换位置 (1)定位元素 (2)找到元素class,通过flex布局,进行位置更换 (3)app.vue中进行全局修改 /* 确认窗取消 ...
vue框架elemnet-ui中Popover弹出框的使用
vue框架elemnet-ui中Popover弹出框的使用 ** 一.如何修改内置的el-popover样式(亲测有效) ** 1.在vue页面文件中使用el-popover组件时,在style标签中 ...
BootStrapJS——modal弹出框
学习参考视频https://ninghao.net/video/1615 1.对话框 - Modal 需要bootstrap的CSS文件引入,以及jQuery的js包 1 <!DOCTYPE h ...
Bootstrap系列之弹出框（Popovers）
文章の目录 1.概述 2.Example: Enable popovers everywhere 3.Example: Using the container option 4.Example 4.1 ...
android h5弹窗,Android嵌套html5页面中alert 弹出框问题
最近项目中遇到一个头疼的问题,那就是在安卓里嵌套html5的时候发现alert弹出框出现了问题那就是弹出的时候会出现串来自http://xxxxx 网页的提示然后下面出来具体的弹出信息,还有更奇 ...
IOS8中SWIFT 弹出框的显示
弹出框不管是在网页端,还是在手机APP端,都是常用的控件.在网页中实现个简单的弹出框只需要调用alert,在IOS中,也不是那么复杂,也是容易使用的. 我先用xcode6创建一个名为iOS8Swift ...
qt中调整弹出框的位置
提要在程序中点击按钮,有时在边缘弹出的弹出框,不能全部展示在用户的面前,弹出框显示的位置会超过程序的边界,从而看不到完整的弹出框,这时可以菜取设置弹出框可以按下鼠标拖动来使其不被遮住,或者在弹出框谈 ...

bootstrap中modal弹出框的使用

bootstrap中modal弹出框的使用相关推荐

最新文章

热门文章