老师，请问为什么alert提示窗口弹出会移动页面的元素？

<!DOCTYPE html>

<html>

<head>

<title>endTermPractice</title>

</head>

<body>

</div>

</div>

</header>

<p class="bigText">实战课程重磅上线</p>

<p class="smallText">一键云学习，还在等待什么？</p>

</div>

</section>

<p class="bigText">每门课都是真实商业案例</p>

<p class="smallText smallText--top">真实案例，真实场景，在实战中实践、操作、调试</p>

<p class="smallText">大牛带你体验真实开发流程，所有开发过程一一为你呈现</p>

</div>

</div>

</section>

<p class="bigText">强大的语言课程体系支持</p>

<p class="smallText">学习环境与课程轻松对接，安装、调试、写入、部署、运行，一站式解决，让你体验开发全流程</p>

<span class="icons">Python</span>

</p>

</div>

</section>

<p class="bigText">省去本地复杂的环境搭建</p>

<p class="smallText">你可以告别在虚拟机中调试开发了</p>

</div>

<p class="smallText">实战课程集成开发环境</p>

</div>

<p class="smallText">内置终端命令行</p>

</div>

<p class="smallText">编译你的应用程序</p>

</div>

<p class="smallText">通过云端服务输出效果</p>

</div>

</section>

<p class="bigText">云端学习可以这样简单</p>

<p class="smallText">看视频，敲代码，一气呵成。结合慕课网为你提供的云端学习工具，所见即所得。从此学习不一样</p>

</div>

</section>

<button type="button" id="learnMore">继续了解学习体验</button>

</section>

<div>

</div>

</footer>

</body>

</html>

/* 通用小号文字样式默认白色*/

.smallText {

font-size: 15px;

color: #fff;

}

/* 通用大号文字样式默认白色 */

.bigText {

font-size: 40px;

color: #fff;

font-weight: bold;

}

/* 通用红线 */

.redline {

height: 1px;

width: 50px;

border-bottom: 3px solid #ff0000;

margin: 0 auto;

}

/* 通用白线 */

.whiteline {

height: 1px;

width: 50px;

border-bottom: 3px solid #fff;

margin: 0 auto;

}

/* 通用区域块样式 */

section {

width: 100%;

height: 640px;

}

/* 第一块区域开始 */

#blockOne {

background-size: cover;

background-repeat: no-repeat;

position: relative;

}

/* header部分开始 */

#blockOne header {

height: 55px;

width: 100%;

overflow: hidden;

position: fixed;

top: 0;

/* 设置相对浏览器窗口定位 */

z-index: 99;

}

/* 左 */

#blockOne header .logo {

width: 170px;

float: left;

position: relative;

}

#blockOne header .logo div {

width: 40px;

height: 40px;

background-size: cover;

margin-left: 10px;

margin-top: 10px;

display: inline-block;

}

#blockOne header .logo p {

font-weight: bold;

display: inline-block;

position: absolute;

top: 50%;

margin-top: -7.5px;

margin-left: 10px;

}

/* 右 */

#blockOne header .rightNav {

width: 630px;

height: 100%;

float: right;

margin-right: 27px;

}

#blockOne header .rightNav span {

display: inline-block;

width: 80px;

padding: 0 8px;

line-height: 40px;

margin-top: 7.5px;

text-align: center;

}

#blockOne header .rightNav .space {

margin-right: 10px;

}

#blockOne header .rightNav .highlight {

background-color: #f01400;

border-radius: 5px;

}

/* header部分结束 */

.blockOne_text {

width: 340px;

height: 95px;

position: absolute;

top: 50%;

margin-top: -47.5px;

left: 50%;

margin-left: -170px;

text-align: center;

}

.blockOne_text .smallText {

margin-top: 20px;

}

/* 第一块区域结束 */

/* 第二块区域开始 */

#blockTwo {

background-color: #f3f5f7;

position: relative;

overflow: hidden;

}

/* 上部分文字内容设定开始*/

.blockTwo_text {

height: 146px;

width: 464px;

text-align: center;

position: absolute;

left: 50%;

margin-left: -232px;

margin-top: 87px;

}

.blockTwo_text .bigText {

color: #07111b;

}

.blockTwo_text .smallText {

color: #07111b;

}

.blockTwo_text .redline {

margin-top: 30px;

margin-bottom: 20px;

}

/* 上部分文字内容设定结束 */

/* 下部分图片内容设定开始 */

.blockTwo_imgArea {

height: 390px;

width: 808px;

position: absolute;

bottom: 0;

left: 50%;

margin-left: -404px;

}

.blockTwo_imgArea .one {

height: 100%;

width: 100%;

background-size: cover;

background-repeat: no-repeat;

position: absolute;

z-index: 1;

/* 注意z-index仅在定位元素下有效 */

}

.blockTwo_imgArea .two {

height: 100%;

width: 100%;

background-size: contain;

background-repeat: no-repeat;

background-position: center;

position: absolute;

z-index: 5;

}

.blockTwo_imgArea .thr {

height: 200px;

width: 250px;

background-repeat: no-repeat;

background-position-x: -100px;

background-size: cover;

position: absolute;

z-index: 3;

right: 95px;

top: 80px;

}

/* 第二块区域结束 */

/* 第三块区域开始 */

#blockThr {

background-color: #2b333b;

position: relative;

overflow: hidden;

}

.blockThr_imgArea {

height: 620px;

width: 40%;

background-repeat: no-repeat;

background-size: contain;

margin-top: 10px;

margin-left: 100px;

display: inline-block;

}

.blockThr_content {

width: 40%;

height: 365px;

display: inline-block;

position: absolute;

top: 200px;

margin-left: 100px;

}

.blockThr_content .redline {

margin-top: 30px;

margin-bottom: 20px;

margin-left: 0;

}

.blockThr_content .icon {

margin-top: 120px;

height: 70px;

}

.icons {

display: inline-block;

width: 70px;

font-weight: bold;

line-height: 70px;

margin-right: 30px;

text-align: center;

}

/* 逐一设置圈圈的样式 */

.blockThr_content .icon span:nth-child(1) {

color: #17b0f2;

border: 5px solid #244557;

border-radius: 50%;

}

.blockThr_content .icon span:nth-child(2) {

color: #7888fd;

border: 5px solid #424d76;

border-radius: 50%;

}

.blockThr_content .icon span:nth-child(3) {

color: #dd605a;

border: 5px solid #6b4146;

border-radius: 50%;

}

.blockThr_content .icon span:nth-child(4) {

color: #22bdba;

border: 5px solid #29535f;

border-radius: 50%;

}

.blockThr_content .icon span:nth-child(5) {

margin-right: 0;

color: #769e4b;

border: 5px solid #3e4e40;

border-radius: 50%;

}

/* 第三块区域结束 */

/* 第四块区域开始 */

#blockFour {

background-color: #f3f5f7;

overflow: hidden;

/* 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之,第一个子元素的margin-top设置会影响父元素，给父元素设置overflow:hidden解决 */

}

.blockFour_text {

width: 480px;

height: 130px;

text-align: center;

margin: 0 auto;

margin-top: 80px;

}

.blockFour_text .bigText,

.blockFour_text .smallText {

color: #07111b;

}

.blockFour_text .bigText {

margin-bottom: 55px;

}

.blockFour_imgArea {

width: 1022px;

height: 120px;

margin: 0 auto;

margin-top: 80px;

text-align: center;

}

.blockFour_imgArea .imgArea {

height: 100%;

width: 170px;

margin-right: 110px;

display: inline-block;

}

.blockFour_imgArea .imgArea .image {

width: 75px;

height: 90px;

margin: 0 auto;

}

/* 最后一张图的右边距清零 */

.blockFour_imgArea div:last-child {

margin-right: 0;

}

/* 插入图片 */

.blockFour_imgArea .one .image {

background-repeat: no-repeat;

background-size: contain;

background-position: center;

}

.blockFour_imgArea .two .image {

background-repeat: no-repeat;

background-size: contain;

background-position: center;

}

.blockFour_imgArea .thr .image {

background-repeat: no-repeat;

background-size: contain;

background-position: center;

}

.blockFour_imgArea .four .image {

background-repeat: no-repeat;

background-size: contain;

background-position: center;

}

.blockFour_imgArea .imgArea .smallText {

color: #07111b;

margin-top: 10px;

}

/* 第四块区域结束 */

/* 第五区域开始 */

#blockFive {

background-color: #b01e2b;

overflow: hidden;

}

.blockFive_imgArea {

width: 210px;

height: 210px;

margin: 0 auto;

margin-top: 95px;

background-repeat: no-repeat;

background-size: cover;

}

.blockFive_text {

width: 700px;

height: 150px;

margin: 0 auto;

text-align: center;

margin-top: 50px;

}

.blockFive_text .whiteline {

margin-top: 25px;

margin-bottom: 30px;

}

/* 第五区域结束 */

/* 第六区域开始 */

.blockSix {

height: 200px;

width: 100%;

background-color: #fff;

position: relative;

}

#learnMore {

height: 60px;

width: 240px;

font-size: 18px;

position: absolute;

left: 50%;

margin-left: -120px;

top: 50%;

margin-top: -30px;

background-color: transparent;

border: 1px solid #707070;

border-radius: 3px;

}

/* 第六区域结束 */

/* 页脚部分开始 */

footer {

background-color: #000;

width: 100%;

height: 100px;

overflow: hidden;

text-align: center;

}

footer div {

width: 630px;

height: 30px;

margin: 0 auto;

margin-top: 30px;

}

footer div span {

margin-right: 30px;

}

footer div span:last-child {

margin-right: 0;

}

footer div span .smallText {

font-size: 12px;

line-height: 30px;

}

footer p {

color: #787d82;

font-size: 14px;

}

JS文件：

window.onload = function() {

alert('done');

}

weixin_慕慕2499132 2020-09-01

源自：宣传页项目 5-6 作业题

收起

2回答

好帮手慕码回答被采纳获得+3积分 2020-09-01 19:05:23

同学你好，目前是没有办法修改的。祝学习愉快~

收起回答

好帮手慕码 2020-09-01 14:13:21

同学你好，这个现象是正常的，alert弹框会终端浏览器的脚本执行，所以在实际开发的项目里很少使用alert。而且本作业中也不需要使用alert，建议同学删掉哦。

祝学习愉快~

收起回答

提问者 weixin_慕慕2499132 #1

有些好奇，没有办法可以让弹出的窗口不影响页面吗？

2020-09-01 17:42:30

相似问题

老师浮动之后对前面元素无影响浮动至下一行左右边框顶端但为什么前面是行内元素会出现重叠呢

1-3弹不出窗口

最后alert(funName(input))弹出来的为什么是undefined？

使用绝对定位后窗口缩小页面错乱

请问老师为什么

登录后可查看更多问答，登录/注册

1.前端零基础入门

参与学习人
提交作业 8403 份
解答问题 40143 个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

了解课程

本课精华内容

问答作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答

请稍等 ...

老师，请问为什么alert提示窗口弹出会移动页面的元素？

老师，请问为什么alert提示窗口弹出会移动页面的元素？

正在回答

请选择置顶位置