<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生Js封装的弹出框-弹出窗口-页面居中-多状态可选</title>
<style type="text/css">
*{margin:0;padding: 0;}
body{height: 2000px;}
#txt {background-color: green;padding: 5px;line-height: 1.5;color: #fff;}
</style>
<link href="show.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="show.js"></script>
<body>
<div id="txt">
<h1>需要实现的状态</h1>
<p>1.是否有遮罩层</p>
<p>2.是否有title</p>
<p>3.alert & confirm</p>
<p>4.自定义弹出框里面的html</p>
<p>5.拖拽</p>
</div>
<button id="bt1" style="margin-top:200px;">有遮罩的alert弹出框</button>
<button id="bt2">没有标题和遮罩的confirm弹出框</button>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6" >
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6" >
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<input type="text" class="cityinput" id="city2" value="城市名">
<select name="IE6" >
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6" >
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<br/>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6" >
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6" >
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<br/>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<br/>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<br/>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="IE6">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<button id="bt3">有确定按钮的alert弹出框</button>
<button id="bt4">自定义html内容的弹出框</button>
<script type="text/javascript">
Prompt.add();//生成遮罩和弹出div
Prompt.init({ //修改参数
title : "我是个alert弹出框",
shade : true,
opacity : 30,
width : 500,
height : 150,
ConfirmFun : true,
//CancelFun : a2,
html : "我是个alert弹出框!",
});
</script>
</body>
</html>
