前端速查手册——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")

  

  

 

posted @ 2019-05-12 20:28 寻觅beyond 阅读(...) 评论(...) 编辑 收藏
Flag Counter