<!--class="modal fade"是要求模态框以动画效果fade打开，class="modal"也行，但打开得十分唐突。id="myModal"与上面的超级链接、按钮相呼应--> <div role="dialog"> <div> <!--必须在modal-content之后才能进行模态框的布局。--> <div> <div> <!--这是模态框的标题部分， ×加分号 为×的转移字符，实质是一个关闭按钮--> <button type="button" data-dismiss="modal"> <span>×</span> </button> <!--这是模态框的标题--> <h4> 服务协议 </h4> </div> <div> <!--这是模态框的主体部分，内嵌一个行数为3的只读文本框，文本框在模态框主体部分居中，不用文本框也可以，但内容会一次性呈现给用户，那还不如直接弹窗算了？--> <p> <textarea rows=3 readonly="true" /> 本协议服务条款具有法律效力。 本协议服务条款具有法律效力。 本协议服务条款具有法律效力。 本协议服务条款具有法律效力。 </textarea> </p> </div> <div> <!--这是模态框的尾部，就放一个居中的确定按钮--> <p> <button type="button" data-dismiss="modal"> 确定 </button> </p> </div> </div> </div> </div>
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：