用JavaScript制作一个对话框

今天我们就用JavaScript来制作一个对话框，如下图

第一步 布局

布局是比较繁琐的一个步骤，也是必不可少的一个步骤，如果前期布局不好，后期还的在进行修改。所以我们就用最简单的方式来布局

用一个大的div标签包裹着四个小的div标签，第一个div标签包裹两个小的div标签这两个div标签用来做“手机”的听话筒。第二个div用来做聊天的对象。

第三个div用来做对话的两个人的头像和对话框。所以第三个的布局有些麻烦。先用一个div标签包裹两个span标签一个span标签为头像，另一个span标签为对话框。另一个也是相同的布局。

第四个div标签要包裹一个select标签，select标签里包裹两个option标签。select是一个下拉框用来切换两个人的对话，option则是下拉框的内容部分。还需要一个button按钮和一个input标签。这样子，基本的布局就完成了（下图为作者的布局）

	<div class="bigbox">
		<div class="box">
		<div class="box-1"></div>
		<div class="box-2"></div>
		</div>
		
		<div class="head">王老师</div>
		
		<div class="sz" id=