在网上参考了些例子，于是我这个sample实现了如标题上的功能。话不多说，上代码：

lishi.html

搜索

form#form1 {

height: 93%;

}

p {

width: 99%;

height: 84%;

}

iframe#id_iframe {

width: 99%;

height: 100%;

border: 0 red solid;

}

input{display:block;}

/* 拖拽*/

html, body

{

height:100%;

overflow:hidden;

}

body, div, h2

{

margin:0;

padding:0;

}

body{font:12px/1.5 Tahoma;}

center{padding-top:10px;}

button{cursor:pointer;}

#overlay

{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,0);

opacity:0.5;

filter:alpha(opacity=50);

display:none;

}

#win

{

position:absolute;

top:50%;

left:50%;

margin:-104px 0 0 -204px;

width:50%;

height:50%;

background:#fff;

border:4px solid #f90;

display:none;

}

h2

{

font-size:12px;

height:18px;

text-align:right;

background:#FC0;

border-bottom:3px solid #f90;

padding:5px;

cursor:move;

}

h2 span

{

color:#f90;

cursor:pointer;

background:#fff;

border:1px solid #f90;

padding:0 2px;

}

window.οnlοad=function()

{

var oWin=document.getElementById("win");

var oLay=document.getElementById("overlay");

var oBtn=document.getElementsByTagName("button")[0];

var oClose=document.getElementById("close");

var oH2=oWin.getElementsByTagName("h2")[0];

var bDrag=false;

var disX=disY=0;

oBtn.οnclick=function()

{

oLay.style.display="block";

oWin.style.display="block";

}

oClose.οnclick=function()

{

oLay.style.display="none";

oWin.style.display="none"

}

oH2.οnmοusedοwn=function(event)

{

var event=event||window.event;

bDrag=true;

disX=event.clientX-oWin.offsetLeft;

disY=event.clientY-oWin.offsetTop;

};

document.οnmοusemοve=function(event)

{

if(!bDrag) return;

var event=event||window.event;

var iL=event.clientX-disX;

var iT=event.clientY-disY;

var maxL=document.documentElement.clientWidth-oWin.offsetWidth;

var maxT=document.documentElement.clientHeight-oWin.offsetHeight;

iL=iL<0?0:iL;

iL=iL>maxL?maxL:iL;

iT=iT<0?0:iT;

iT=iT>maxT?maxT:iT;

oWin.style.marginTop=oWin.style.marginLeft=0;

oWin.style.left=iL+"px";

oWin.style.top=iT+"px";

};

document.οnmοuseup=function ()

{

bDrag=false;

};

};

input{

display: inline-block;

margin-top: 3%;

}

input#tijiao {

float: right;

margin-right: 9%;

}

input#txt_uname {

text-align: center;

margin-left: 3%;

width: 55%;

}

弹出层

上面的代码是为了实现弹出窗口。其效果图;

接下来连接数据库lishi.php：

tr:hover{

background-color: aquamarine;

}

$servername = "服务器名称";

$username = "用户名";

$password = "密码";

$dbname = "数据库名";

?>

if (isset($_GET['uname'])) {

//连上数据库

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

}

// 设置编码，防止中文乱码

mysqli_query($conn , "set names utf8");

//查找

$sql = "SELECT * FROM 表名字 WHERE 属性名 LIKE '%".$_GET['uname']."%'";//实现模糊查询

//执行

$result = $conn->query($sql);

//输出值

if ($result->num_rows > 0) {

// 输出每行数据

echo '

ID

名称

描述

while($row = $result->fetch_assoc()) {

echo "

{$row['id']} ".

"

{$row['person_name']} ".

"

{$row['description']} ".

// "

{$row['submission_date']} ".

"

";

}echo '

';

} else {

echo "没数据";

}

//关闭数据库连接，释放资源

$conn->close();

}

?>

最后，在lishi.html中win里添加表单，并将表单的action属性指向lishi.php。所以lishi.html的body部分更改为:

弹出层

以上就是今天的sample了，效果图：

内容来源于网络如有侵权请私信删除