弹窗滚动scrolltop, scroll();方法

发布时间：2020-10-05 10:04:04 来源：网络阅读：1001 作者：pmlinjian 栏目：开发技术

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=" utf-8">
	<meta name="author" content="http://www.jb51.net/" />
	<link rel="stylesheet" href="http://pcss1.4008000000.com/app_css/4008000000/v20/base.css" />
	<link rel="stylesheet" href="http://pcss1.4008000000.com/app_css/4008000000/v20/public.css"/>
	<script type="text/javascript" src="http://pscript1.4008000000.com/app_js/paui/1.0.1/build/pa.ui.min.js"></script>
	<style>
	.J_opacityBg {
	background: #000;
	opacity: 0.6;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter: alpha(opacity=60);
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 999;
	}
	.intro-box-module{width: 760px; height: 568px; margin-left: -380px; margin-top: -284px; position: fixed; left: 50%; top: 50%; z-index: 1000;}
	.intro-box-module .title-close{border-top-left-radius: 3px; border-top-right-radius: 3px; background-color: #ff6634; height: 40px; position: relative;}
	.intro-box-module #J_introcloseBtn{width: 18px; height: 18px; background: url("intro_bg_icons.png") 0 -85px no-repeat; position: absolute; top: 11px; right: 16px;}
	.intro-box-module .intro-cont-box{border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border: 1px solid #b5b5b5; border-top: 0; background-color: #fff; position: relative}
	.intro-box-module .intro-tab{min-height: 60px; line-height: 60px; padding-left: 30px;}
	.intro-box-module .intro-tab a{float: left; display: inline-block; margin-right: 5px; font-family: "宋体"; font-size: 14px;}
	.intro-box-module .intro-tab a:hover{color: #ff6634; text-decoration: none;}
	.intro-box-module .intro-tab a.curr{color:#ff6634; font-weight: bold; }
	.intro-box-module .intro-tab span.txt{}
	.intro-box-module .intro-content{border-top: 1px solid #d7d7d7; border-bottom: 1px solid #d7d7d7; height: 380px; background-color: #f3f3f3; padding-top: 19px; padding-left: 30px;overflow-y: scroll;}
	.intro-box-module .notice-section{width: 308px; height: 75px; background:url("intro_bg_icons.png") 0 0 no-repeat; position: absolute; top: 48px; right: 20px;}
	.intro-box-module .notice-section p{width: 225px; padding: 14px 0 0 24px; line-height: 22px; font-size: 12px; color: #333333;}
	.intro-box-module .notice-section p strong{ color: #ff0000; font-size: 16px;}
	.intro-box-module .intro-content-item{}
	.intro-box-module .intro-content-item h3{border-left: 6px solid #ff6633; height: 23px; line-height: 23px; color: #404040; font-size: 18px; padding-left: 16px;}
	.intro-box-module .show{display: block;}
	.intro-box-module .intro-content-txt{padding-top: 22px; font-family: "宋体"; font-size: 14px;}
	.intro-box-module .intro-content-txt p{line-height: 24px;}
	.intro-box-module .submit-btn-section{padding: 25px 0 22px 0; text-align: center;}
	.intro-box-module .submit-btn-section a{display: inline-block; width: 160px; height: 40px; line-height: 40px; border-radius: 3px; font-size: 18px; text-align: center; color: #fff;}
	.intro-box-module .submit-btn-section .submit-btn-off{background-color: #9f9f9f;}
	.intro-box-module .submit-btn-section .submit-btn-on{background-color: #ff6633;}
	</style>
	<title>弹窗</title>


	</head>
	<body>
	<div id="J_introBox" class="intro-box-module">
	<div class="title-close"><a id="J_introcloseBtn" href="javascript:void(0);" title="关闭" otitle="关闭-免责事项说明" otype="button"></a></div>
	<div class="intro-cont-box">
	<div id="J_introTabNav" class="intro-tab">
	<a class="curr" href="#introCont1" title="免责事项说明" otitle="免责事项说明" otype="button">《免责事项说明》</a><a href="#introCont2" title="保险条款" otitle="保险条款" otype="button">《保险条款》</a><a href="#introCont3">《特别约定》</a><a href="#introCont4" title="投保声明" otitle="投保声明" otype="button">《投保声明》</a><a href="#introCont5" title="浮动告知" otitle="浮动告知" otype="button">《浮动告知》</a><span class="txt f14">说明</span>
	</div>
	<div class="notice-section">
	<p>为保障您的权益，<strong>请下拉滚动条完成</strong><br />全部条款阅读，特别是免责事项说明— —</p>
	</div>
	<div id="J_introCon" class="intro-content">
	<div id="introCont1" class="intro-content-item">
	<h3>免责事项说明</h3>
	<div class="intro-content-txt">
	<p>总则</p>
	<p>第一条本保险合同由保险条款、投保单、保险单、批单及其他特别约定组成。凡涉及本保险合同的约定，均应采用书面形式。</p>
	<p>第二条本保险条款分为基本险、通用条款、附加险和释义四个部分。附加险不能独立保险，保险人按照承保险别分别承担保险责任。附加险条款与基本险条款相抵触之处，以附加险条款为准，未尽之处，以基本险条款为准。</p>
	<p>除非本保险条款另有规定，通用条款的规定及释义适用于本保险条款的任何部分。</p>
	<p>第三条本保险条款所称机动车是指在×××境内（不含港、澳、台地区）以动力装置驱动或者牵引，上道路行驶的供人员乘用或者用于运送物品以及进行工程专项作业的轮式车辆或履带式车辆，但不包括摩托车和拖拉机。</p>
	<p>第四条本保险合同为不定值保险合同。</p>
	<p>第五条本保险仅适用于非营运个人车辆。</p>
	<p>第一部分基本险</p>
	<p>基本险包括商业第三者责任保险、车辆损失险、全车盗抢险、车上人员责任险共四个独立的险种，投保人可以选择投保其中部分险种，也可以选择投保全部险种。</p>
	<p>第一章商业第三者责任保险</p>
	</div>

	</div>
	<div id="introCont2" class="intro-content-item">
	<h3>保险条款</h3>
	<div class="intro-content-txt">
	<p>总则</p>
	<div style="height: 300px;"></div>

	</div>
	</div>
	<div id="introCont3" class="intro-content-item">
	<h3>特别约定</h3>
	<div class="intro-content-txt">
	<p>总则</p>
	<div style="height: 300px;"></div>

	</div>
	</div>
	<div id="introCont4" class="intro-content-item">
	<h3>投保声明</h3>
	<div class="intro-content-txt">
	<p>总则</p>
	<div style="height: 300px;"></div>

	</div>
	</div>
	<div id="introCont5" class="intro-content-item">
	<h3>浮动告知</h3>
	<div class="intro-content-txt">
	<p>总则</p>
	<div style="height: 300px;"></div>

	</div>
	</div>
	</div>
	<div class="submit-btn-section"><a id="J_subBtn" class="submit-btn-off" href="javascript:void(0);">同意并确定</a></div>
	</div>
	</div>

	<div class="J_opacityBg"></div>
	<script type="text/javascript">
	//
	(function(){
	//关闭弹窗
	$("#J_introcloseBtn").click(function(){
	$("#J_introBox, .J_opacityBg").hide();
	});
	//TAB
	$("#J_introTabNav a").click(function(){
	var index = $(this).index();
	$(this).addClass("curr").siblings().removeClass("curr");
	//$("#J_introCon .intro-content-item").eq(index).show().siblings(".intro-content-item").hide();
	});
	//
	var intrScrollH = parseInt($("#J_introCon").scrollTop());
	$("#J_subBtn").click(function(){
	if(intrScrollH < 800){
	$(".notice-section").css("top",410 + "px");
	}
	});
	$("#J_introCon").scroll(function(){
	var intrScrollH2 = parseInt($("#J_introCon").scrollTop());
	if(intrScrollH2 > 800){
	$("#J_subBtn").addClass("submit-btn-on");
	$(".notice-section").hide();
	$("#J_subBtn").attr({"href":"http://www.4008000000.com/", "target":"_blank"})
	}
	});

	})()
	</script>
	</body>
	</html>

向AI问一下细节

弹窗滚动scrolltop, scroll();方法

猜你喜欢

最新资讯

相关推荐

相关标签