您的位置：首页 > Web前端 > JQuery

新增功能点击-弹出新页面功能封装,jquery实现,实用型..........

2019-05-17 12:17 393 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点击弹窗html</title>
<style>
*{margin: 0px;padding: 0px;}
.and_page{
width: 100%;
height: 100%;
background: rgba(42,42,42,0.2);
position:absolute;top: 0px;
display: none
}
.and_page .and_page_all{
width: 800px;
position: relative;
top: 50%;
left: 50%;
margin-top: -270px;
margin-left: -400px;
border: 1px solid #99999936
}
.and_page .and_page_all .and_page_content{
width: 100%;
height: 30px;
border-bottom: 1px solid #99999936;
background: #FFFFFF;
color: #666
}
.and_page .and_page_all .and_page_content p{
float: left;
font-size: 16px;
line-height: 30px;
margin-left: 10px
}
.and_page .and_page_all .and_page_content .close{
float: right;
width: 16px;
margin-right: 10px;
line-height: 28px;
text-align: center;
font-size: 20px;
background: #FFFFFF;
cursor: pointer
}
.and_page .and_page_all .all_myIframe{
width:100%;
height:500px;
margin-top: 1px
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
window.addWeb=function addWeb(title,url){
var andPage = $("<div class=\"and_page\"></div>");
var pageAll = $("<div class=\"and_page_all\"></div>");
var pageContent = $("<div class=\"and_page_content\"></div>");
var content_p = $("<p></p>");
content_p.text(title);
var content_a = $("<a class=\"close\">×</a>");
var allMyIframe = $("<iframe class=\"all_myIframe\" id=\"myIframe\" src=\"\" frameborder=\"0\">");
allMyIframe.attr('src',url);
content_p.appendTo(pageContent);
content_a.appendTo(pageContent);
allMyIframe.appendTo(pageContent);
pageContent.appendTo(pageAll);
pageAll.appendTo(andPage);
andPage.appendTo('body');
andPage.fadeIn();

pageAll.delay(500).slideDown();
$(".close").click(function(){
$(".and_page").fadeOut();
})
}
})
</script>
</head>
<body>
<div class="box">
<input onclick="addWeb('韋小寳','https://toutiao.jxnews.com.cn/?from=dj38')" type="button" value="点击淡入弹窗" />
</div>
</body>
</html>

样式可自行修改,欢迎留言!

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

新增功能点击-弹出新页面功能 封装,jquery实现,实用型..........

新增功能点击-弹出新页面功能封装,jquery实现,实用型..........