bootstrap做搜索下啦窗
2019-03-19 10:02:48 qq_42952532 阅读数 991

点击按钮,弹出一个窗,输入信息,然后提交。
需要引入bootstrap文件和jq文件

<body>

<h2>创建模态框(Modal)</h2>

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
	添加一位参会人
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content" id="modal_1">
			<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">
				姓名<input type="text" class="form-control" id="name_1"/>
                性别<br/>
                <label class="checkbox-inline">
                    <input type="radio" value="男" name="sex_1" checked /></label>
                <label class="checkbox-inline">
                    <input type="radio"  value="女" name="sex_1"/></label>
                <br/>
                个性签名<input type="text" class="form-control" id="job_1"/>
                手机号<input type="text" class="form-control" id="phone_1"/>
			</div>
			<div class="modal-footer">
				<button id="close_1" type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary" onclick="add_man()">
					提交更改
				</button>
			</div>
		</div>
	</div>
</div>


<table class="table table-hover table-bordered" id="mytable">
    <thead>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>个性签名</th>
        <th>手机号</th>
        <th>选中</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="listTable">

    </tbody>
</table>



<script type="text/javascript">
    function add_man() {
        var name = document.getElementById('name_1').value;
        var b_1 = name.replace(/(^\s*)|(\s*$)/g, '');
        if (b_1 == '' || b_1 == undefined || b_1 == null){
            alert('请输入姓名');
            return false;
        }
        var sex = $("input[name='sex_1']:checked").val();
        var job = document.getElementById('job_1').value;
        var phone = document.getElementById('phone_1').value;
        var b_3 = phone.replace(/(^\s*)|(\s*$)/g, '');
        if(!(/^1\d{10}$/.test(b_3))){
            alert('请准确输入11位手机号码!');
            return false;
        }

        var tr = document.createElement('tr');
        var td1 = document.createElement('td');
        td1.innerHTML = name;
        var td2 = document.createElement('td');
        td2.innerHTML = sex;
        var td3 = document.createElement('td');
        td3.innerHTML = job;
        var td4 = document.createElement('td');
        td4.innerHTML = phone;
        var td5 = document.createElement('td');
        var input1 = document.createElement('input');
        td5.appendChild(input1);
        input1.setAttribute('type','checkbox');
        input1.setAttribute('name','item');
        var td6 = document.createElement('td');
        var input2 = document.createElement('input');
        td6.appendChild(input2);
        input2.setAttribute('type','button');
        input2.setAttribute('value','删除');
        input2.setAttribute('onclick','del(this)');
        input2.className = 'btn btn-danger';


        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);
        tr.appendChild(td5);
        tr.appendChild(td6);
        var listTable = document.getElementById('listTable');
        listTable.appendChild(tr);
        document.getElementById('name_1').value = '';
        document.getElementById('job_1').value = '';
        document.getElementById('phone_1').value = '';
        $('#close_1').click();

    }
    function del(obj) {
        var oParentnode = obj.parentNode.parentNode;
        var olistTable = document.getElementById('listTable');
        olistTable.removeChild(oParentnode);
    }

</script>
</body>
2016-07-05 19:44:10 Sugar_Elina 阅读数 1095


今天第一天接触bootstrap

问题1:

radio, checkbox与字不能对齐问题的解决,bootstrap.min.css中.form-horizontal .radio{padding:0;}解决这个问题。

问题2:

<div class="form-group col-md-6" style="left:30%;float:none;">
    <label >
        <input  type="radio" name="address"  value="sel"<span style="color:#FF0000;"> <span style="color:#3333FF;">data-toggle="modal" data-target="</span>#modifyselect</span>"> 选择地址
    </label>
                                 
    <label >
        <input type="radio" name="address" value="wri" <span style="color:#FF0000;"><span style="color:#000099;">data-toggle="modal" data-target="</span>#modifywrite"</span>/>填写地址             
    </label>
                                 
 </div>
红色字体对应浮窗model的id

 <!--  MODAL-->
<div class="modal fade" id="modifywrite" tabindex="-1" aria-labelledby="myModalLabel">
<span style="font-family:KaiTi_GB2312;">    </span><div class="modal-dialog" >
	<div class="modal-content">
	<span style="font-family:KaiTi_GB2312;">    </span><div class="modal-header">
		<button type="button" class="close" data-dismiss="modal"<span style="font-family:KaiTi_GB2312;"> </span>aria-label="Close">
		<span style="font-family:KaiTi_GB2312;">   </span><span aria-hidden="true">×</span>
		</button>
		<h4 class="modal-title" id="myModalLabel"></h4>
	<span style="font-family:KaiTi_GB2312;">    </span></div>
	<span style="font-family:KaiTi_GB2312;">    </span><div class="modal-body">
	<span style="font-family:KaiTi_GB2312;">       </span><div class="form-group  ">
		<span style="font-family:KaiTi_GB2312;"> </span><label class="col-md-3 control-label">具体地址</label>
		<span style="font-family:KaiTi_GB2312;">     </span><div class="col-md-9">
			<input type="text" class="form-control" name="room" placeholder="请填写具体地址">
		<span style="font-family:KaiTi_GB2312;">     </span></div>
		</div>
		<br><br>		    
	   </div>
	<span style="font-family:KaiTi_GB2312;">   </span><div class="modal-footer">
		<button class="btn btn-success" style="width:80px;"data-dismiss="modal" ng-click="">确认</button>
		<button class="btn" data-dismiss="modal">取消</button>
	<span style="font-family:KaiTi_GB2312;">   </span></div>
	</div>
<span style="font-family:KaiTi_GB2312;">    </span></div>
</div>
<span style="font-family:KaiTi_GB2312;">一个简单的model浮窗。</span>
20160705晚上看一下bootstrap视频以及了解一下zTree明天开始学习ztree

                    

2016-04-21 15:47:16 sunnylinner 阅读数 2891
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>模态弹出框--实现原理解析(二)</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<h3>Bootstrap弹出窗示例</h3>

<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">
大的模态弹出窗
</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title">模态弹出窗标题</h4>
			</div>
			<div class="modal-body">
				<p>模态弹出窗主体内容</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary">保存</button>
			</div>
		</div>
	</div>
</div>

<!-- Small modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">
小的模态弹出窗
</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title">模态弹出窗标题</h4>
			</div>
			<div class="modal-body">
				<p>模态弹出窗主体内容</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary">保存</button>
			</div>
		</div>
	</div>
</div>

<!-- href触发模态弹出窗元素 -->
<a data-toggle="modal" data-target="#mymodal-link" class="btn btn-primary">通过链接href属性触发</a>
<!-- 模态弹出窗内容 -->
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="mymodal-link">
    <div class="modal-dialog">
    	<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title">模态弹出窗标题</h4>
			</div>
			<div class="modal-body">
				<p>模态弹出窗主体内容</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary">保存</button>
			</div>
		</div>
	</div>
</div>

<button class="btn btn-primary" type="button">JavaScript触发</button>
<div class="modal fade" id="themodal" tabindex="-1">
    <div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title">模态弹出窗标题</h4>
			</div>
			<div class="modal-body">
				<p>模态弹出窗主体内容</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary">保存</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
  $(function(){
    $(".btn").click(function(){
      $("#themodal").modal("toggle");
    });
  });
</script>
</body>
</html>
<!--fade 过渡动画效果-->
<!--data-toggle 用来控制模态弹出窗口的显示-->
<!--data-target 用来定义要触发的模态弹出窗是哪一个-->
<!--data-backdrop 是否包含一个背景div元素,如果为真,则单击该背景时关闭弹出窗-->
<!--data-keyboard 如果为真,按ESC关闭弹出窗-->
<!--data-show 如果为真,初始化时显示弹出窗-->

几个简单的示例~





2017-10-27 16:46:00 weixin_33781606 阅读数 2
今天遇到家长开通视频日期展示的问题,封装了bootstrap原生modal

!(function (window, $, undefined) {

    var messageModal = function (opt) {
        var defaults = {
            title: '查看详情',
            bodyText: '....',
            titleCss: {"fontSize": "16px", "text-align": "center"},
            bodyCss: {"fontSize": "12px", "text-align": "center"}
        }
        this.options = $.extend({}, defaults, opt);

        this.pbody = $(parent.body);

    }

    var html = {
        patentd: '<div class="modal message-modal-see" id="myModal"  style="display: block;background:rgba(0,0,0,0.2);"></div>',
        modalDialog: '<div class="modal-dialog" role="document"></div>',
        modalContent: '<div class="modal-content"></div>',
        modalHead: '<div class="modal-header"></div>',
        headBtn: '<button type="button" class="close close-modal" ><span aria-hidden="true">×</span></button>',
        headTitle: '<h4 class="modal-title" id="myModalLabel" style="text-align: center">视频开通详情</h4>',
        modalBody: ' <div class="modal-body"></div>',
        modalFooter: ' <div class="modal-footer"></div>',
        footerCbtn: ' <button type="button" class="btn btn-default close-modal" data-dismiss="modal">关闭</button>',

    }
    var fatherBody = $(window.top.document.body);
    messageModal.prototype = {
        createModal: function (ele) {
            $(html.headTitle).text(this.options.title).css(this.options.titleCss);
            var mobody = $(html.modalBody).css(this.options.bodyCss).append(this.options.bodyText);
            var content = $(html.modalContent).append(
                $(html.modalHead).append(html.headBtn).append($(html.headTitle))
            ).append(
                mobody
            ).append(
                $(html.modalFooter).append(html.footerCbtn)
            ).css('margin-top', '60%')

            var modal = $(html.patentd).append(
                $(html.modalDialog).append(
                    content
                )
            )

            modal.appendTo(fatherBody)
        },
        removeModal: function () {
            this.remove()
        },
    }

    $(parent.document).on('click', '.close-modal',  function () {
        $(parent.document).find('.message-modal-see').remove()
    });
    window.messageModal = messageModal
}(window, jQuery));


使用


                   <td data-studnet-times="${student.times}">
                            <c:if test="${fn:length(student.times)>1}">
                                ${fn:substring(student.times,1,22)}
                                <c:if test="${fn:length(student.times)>1}">
                                    <button class="btn  btn-info btn-xs see-more-times">查看更多</button>
                                </c:if>
                            </c:if>
                            <c:if test="${fn:length(student.times)==1}">
                                ${student.times}
                            </c:if>
                        </td>




$('.see-more-times').click(function (e) {
        var self = this;
        var dataTimes = $(self).parents('td').data('studnet-times');
        var data = dataTimes.substr(1, dataTimes.length - 2).replace(/—/g, '到').replace(/,/g, '</br>');
        var modal = new messageModal({
            bodyText: data,
            bodyCss: {"fontSize": "20px", "text-align": "center"}
        });
        modal.createModal()
    });

效果

3437040-d6a03b0168dcd7a2.png
image.png
2016-01-16 14:56:34 u011904531 阅读数 176

每天都要不停的奔跑,脚步不能停!!!


bootstrap Datatable搜索

阅读数 307

$(document).ready(function(){loadentity();});//加载实体列表functionloadentity(){$('#example').dataTable({

博文 来自: tszxlzc

Bootstrap弹出窗内容的换行

阅读数 1830

bootstrap弹出窗可以方便的展示模块的详细信息,但是按照官网给定的写法发现内容不会换行,添加标签内容还是原样输出到弹出窗中。悬浮框效果图:同时需要js中初始化:$('[data-toggle="popover"]').popover()data-content的内容通常使用模板传值来动态显示,当在php代码换行处手动插入换行,弹出窗会以纯文本形式展示。以此代码也

博文 来自: InTheMirrors

bootstrap下拉框 搜索

阅读数 551

                            &lt;divclass="form-group"&gt; &lt;labelclass="col-sm-3control-label"&gt;负责人:&lt;/label&gt; &lt;divclass="col...

博文 来自: Dzq_Boyka

Bootstrap模态窗- 垂直居中 & 拖动

阅读数 2

2019独角兽企业重金招聘Python工程师标准>>>...

博文 来自: weixin_34125592

bootstrap关闭当前模态窗

阅读数 1344

关闭模态窗

博文 来自: EverJust
没有更多推荐了,返回首页