网站地图 | RSS订阅 老铁博客 - 上海SEO优化|上海网站建设|蜘蛛池出租|站群代搭建
你的位置:首页 » 前端脚本 » 正文

html弹窗,html网页弹窗代码

2020-6-10 13:50:4 | 作者:老铁SEO | 0个评论 | 人浏览

  &lt;html&gt;<br>&lt;head&gt;<br>&lt;title&gt;作业&lt;/title&gt;<br>&lt;script&gt;<br>functionwelcome(){<br>window.alert(&quot;欢迎进入&quot;);<br>}<br>&lt;/script&gt;<br>&lt;/head&gt;<br>&lt;bodyonload=&quot;welcome();&quot;&gt;<br>这是老师布置的弹窗作业<br>&lt;/body&gt;<br>&lt;/html&gt;<br>说明:把以上直接保存为html网页文件即可


  弹出窗口的html的代码是怎么写的?


  1、最基本的弹出窗口代码?


  <SCRIPTLANGUAGE="javascript">


  <!--


  window.open("page.html")


  -->


  </SCRIPT>?


  window.open("page.html")用于控制弹出新的窗口page.html,如果page.html不与主窗口在同一路径下,前面应写明路径,绝对路径(http://)和相对路径(../)均可。


  2、经过设置后的弹出窗口


  <SCRIPTLANGUAGE="javascript">


  <!--


  window.open("page.html","newwindow","height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no")&nbsp;


  ->


  </SCRIPT>


  <SCRIPTLANGUAGE="javascript">js脚本开始;window.open弹出新窗口的命令;"page.html"弹出窗口的文件名;"newwindow"弹出窗口的名字(不是文件名),非必须,可用空"代替;


  3、用函数控制弹出窗口


  <scriptLANGUAGE="JavaScript">


  <!--


  functionopenwin(){


  window.open("page.html","newwindow","height=100,width=400,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no")


  }


  -->


  </script>


  这里定义了一个函数openwin(),函数内容就是打开一个窗口。


  4、同时弹出2个窗口


  <scriptLANGUAGE="JavaScript">


  <!--


  functionopenwin(){


  window.open("page.html","newwindow","height=100,width=100,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no")


  &nbsp;


  window.open("page2.html","newwindow2","height=100,width=100,top=100,left=100,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no")


  }


  -->


  </script>


  为避免弹出的2个窗口覆盖,用top和left控制一下弹出的位置不要相互覆盖即可。


  5、主窗口打开文件1.htm,同时弹出小窗口page.html


  <scriptlanguage="javascript">


  <!--


  functionopenwin(){


  window.open("page.html","","width=200,height=200")


  }


  -->


  </script>


  html弹出窗口有几种方式


  html弹出窗口的常用方式:


  1、使用javascripts代码弹出窗口


  <SCRIPTLANGUAGE="javascript">


  <!--


  window.open('page.html')


  -->


  </SCRIPT>


  这一段代码可以加入HTML的任意位置,<head>和</head>之间可以,<body>间</body>也可以。


  2、


  <SCRIPTLANGUAGE="javascript">


  <!--


  window.open('page.html','newwindow')


  //写成一行


  -->


  </SCRIPT>


  3、使用函数控制


  下面是一个完整的代码:


  <html>


  <head>


  <scriptLANGUAGE="javascript">


  <!--


  functionopenwin(){


  window.open("page.html","newwindow")


  }


  -->


  </script>


  </head>


  <bodyonload="openwin()">


  ...页面内容...


  </body>


  </html>


  html这种在一个页面弹窗如何写


  jq+定位?


  slideToggle();//显示和隐藏


  hide();//隐藏


  <!DOCTYPE?HTML>


  <html>


  <head>


  ????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">


  ????<script?src="js/jquery-1.8.3.min.js"?type="application/javascript"></script><!--js-->


  ????<title>玩弹窗</title>


  </head>


  <body>


  <div?>


  <div?style="width:?80%;?height:?700px;margin:0?auto;?background:#000">


  ????<a?class="a"?href="javascript:void(0)"??style="?background:red">弹出</a>


  </div>


  <div?class="b"??style="width:?300px;?height:?200px;?background:#fff;?display:?none;??position:absolute;?top:20%;?left:40%;">


  ????<ul>


  ????????<li>白色的</li>


  ????????<li><a?class="c"?href="javascript:void(0)"??style="?background:red">关闭</a></li>


  ????</ul>


  </div>


  </div>


  <script>


  $('.a').click(function(){


  ????????$('div.b').slideToggle();


  ????????if($(this).html()=='弹出'){


  ????????????$(this).html('关闭');


  ????????}else{


  ????????????$(this).html('弹出');


  ????????}


  ????})


  $('.c').click(function(){


  ????????$('div.b').hide();


  ????})


  </script>


  </body>


  </html>

  • 本文来自: 老铁博客,转载请保留出处!欢迎发表您的评论
  • 相关标签:
  • 已有0位网友发表了一针见血的评论,你还等什么?

    必填

    选填

    记住我,下次回复时不用重新输入个人信息

    必填,不填不让过哦,嘻嘻。

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

    相关推荐