带背景logo的弹出层模板

要实现一个弹出层。效果图如下：

下面说一下html布局

共用到了4个div层：层次关系如下

 <div class="bottom_block">
        <div id="bg_block" class="bg_block">
                <div class="message_area">
                    <textarea></textarea>
                    <input type="submit" id="save_btn" class="blue_btn" value="保存" />
                    <input type="button" id="cancle_btn" class="blue_btn" value="取消" />
                    
                </div>
                <div style="float:left; padding-left:10px; margin-top:-50px; line-height:50px;">
                        最多输入 <span style="color:red;" >200</span> 字。
                        你还可以输入<span style="color:red;" id="left_words"> 200 </span>字。
                </div>
        </div>
    </div>

其中bottom_block为黑色背景蒙板层。

bg_block的主要作用是添加背景logo图片。

message_area层的主要作用是为textarea添加白色半透明背景。

textarea的背景属性设置为transparent。

css如下：

.bottom_block
    	{
    		position:fixed;
    		width:100%;
    		height:100%;
    		top:-0px;
    		left:-0px;
    		margin:0px;
    		padding:0px;
    		background:rgba(0,0,0, 0.8);
    		display:none;
    		text-align:center;
    	}	
    	
    	.message_area
		{
			min-height:300px;
			height:300px;
			width:700px;
			background:url(http://localhost:8080/mcjj/images/logo.jpg) no-repeat;
			background-position:center center;
			text-align:center;
		}
		
		.message_area textarea
		{
			border:none;
			background:rgba(255,255,255,0.7);
			width:700px;
			height:250px;
			overflow-y: auto;	
			overflow-x:none;
			font-size:14px;	
			resize:none;
			overflow: hidden;	
			padding:15px;
			font-family: "微软雅黑";
		}
		
		.bg_block
		{
			background:#fff; 
			width:700px; 
			height:300px; 
			margin-left:auto; 
			margin-right:auto;
		}

2. 在上图左下角中的字数统计实现方法。

/* handleContent 函数主要是处理文本框中的字数和长度 */
    	function handleContent(){
    			var val = $(this).val();
    			if(200 <= val.length)
    			{
    				$("textarea").val(val.substr(0, 200));
    			}
    			$("#left_words").html(200 - $("textarea").val().length);
    		}
    	
    	$(function(){
    		$("textarea").change( handleContent);
    		$("textarea").keyup( handleContent);
});