前端速查手册——Note

目录

---

自定义弹框（模块框)

HTML5新增标签

HTML5新增属性

---

自定义弹框（模块框)

　　HTML

<div style="display:none" id="model"></div>
<div style="display:none" id="notice_div" class="notice_div">
	<div id="notice_header">
		<div id="notice_title">提示信息</div>
	</div>
	<div id="notice_content">
		<div id="notice_msg">信息</div>
	</div>
	<div id="notice_action">
		<button class="confirm_btn" onclick="cancel()">确认</button>
		     
		<button class="return_btn" onclick="cancel()">返回</button>
	</div>
</div>

　　CSS

#model {
    width:100%;
    height:200%;
    position:fixed;
    left:0;
    top:0;
    background:black;
    opacity:0.8;
}
#notice_div {
    width: 40%;
    height:200px;
    position:fixed;
    left:30%;
    top: 20%;
    height:30%;
    text-align:center;
    font-size:18px;
}
#notice_header {
    height: 50px;
    background-color:#1e88d4;
    border-radius: 10px 10px 0 0;
    color: black;
    font-weight:900;
}
#notice_title {
    padding-top:12px;
}
#notice_content {
    height:100px;
    background-color:#d3d7cf;
    border-top:1px solid gray;
    border-bottom:1px solid gray;
}
#notice_action {
    height:50px;
    background-color:#d3d7cf;
    text-align:center;
    border-radius: 0 0 10px 10px;
}
#notice_msg {
    margin-top:30px;
    color: black;
}
.confirm_btn, .return_btn {
    text-align: center;
    width: 100px;
    height: 35px;
    line-height: 35px;
    margin-top:7px;
    letter-spacing: 5px;
    text-indent: 10px;
    background: #1e88d4;
    border: 1px solid #1e88d4;
    border-radius: 5px;
    display: inline-block;
    cursor:pointer;
}
.return_btn {
    background: #9ea09a;
    border: 1px solid #9ea09a;
}

　　

　　JavaScript

function alert_msg(content, title="提示信息") {
	$("#notice_title").html(title);
	$("#notice_msg").html(content);
	$("#model").show();
	$("#notice_div").show();
}

function cancel() {
	$("#model").hide();
	$("#notice_div").hide();
}

HTML新增标签

HTML5新增属性

　　输入框自动获得焦点

　　autofocus属性，可以直接写input标签中该属性即可（不用赋值）。也可以赋值为true或者“autofocus"，都可以开启自动获得焦点。

<input  type="text" autofocus />
<input  type="text" autofocus=true />
<input  type="text" autofocus="autofocus" />

　　

　　自动补全

　　autocomplete属性，默认的是on，也就是开启了自动补全功能。可以设置为off，即可关闭自动补全。

　　　　示例：

<input  type="text" autocomplete="on" />
<input  type="text" autocomplete="off" />

　　如果想要全部禁用input的自动补全功能，可以使用jquery实现：

$("input").attr("autocomplete", "off")