bootstrap模态窗

点击按钮,弹出一个窗,输入信息,然后提交。
需要引入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>
展开阅读全文

没有更多推荐了,返回首页