網站地圖 | 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位網友發表了一針見血的評論,你還等什么?

    必填

    選填

    記住我,下次回復時不用重新輸入個人信息

    必填,不填不讓過哦,嘻嘻。

    ◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

    相關推薦

    苍穹之上手游怎么赚钱 海南飞鱼开奖号码查询 陕西体彩十一选五遗漏 上海11选5开到几点结束 海洋生物股票今日行 广西快乐十分开奖现场 威海股票期货配资 上海高频十一选五 三分pk10免费计划 彩票平台搭建 安徽快三开奖现场直播