加入收藏 | 设为首页 | 会员中心 | 我要投稿 河北网 (https://www.hebeiwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 创业 > 正文

HTML入门教程:打开新窗口和弹出窗口

发布时间:2018-09-07 02:55:34 所属栏目:创业 来源:站长网
导读:一、 根基变革 参数表明: window.open 弹出新窗口的呼吁; page.html 弹出窗口的文件名; newwindow 弹出窗口的名字(不是文件名),非必需,可用空取代; 100 窗口高度; width=400 窗口宽度; top=0 窗口间隔屏幕上方的象素值; left=0 窗口间隔屏幕左侧的象素

  一、 根基变革

  参数表明:

  window.open 弹出新窗口的呼吁;

  "page.html” 弹出窗口的文件名;

  "newwindow” 弹出窗口的名字(不是文件名),非必需,可用空””取代;

  100 窗口高度;

  width=400 窗口宽度;

  top=0 窗口间隔屏幕上方的象素值;

  left=0 窗口间隔屏幕左侧的象素值;

  toolbar=no 是否表现器材栏,yes为表现;

  menubar,scrollbars 暗示菜单栏和转动栏。

  resizable=no 是否应承改变窗口巨细,yes为应承;

  location=no 是否表现地点栏,yes为应承;

  status=no 是否表现状态栏内的信息(凡是是文件已经打开),yes为应承;

  二、 弹启一个全屏窗口

  插手fullscreen

  三、 打开一个和按F11所见到的一样的窗口

  插手channelmode

  四、 打开一个连问题栏都没有的窗口(无问题、最小、最大、以及封锁按钮)

  看看,什么结果? 假如把resizable 设为0 scrollbars = no 呢?

  五、 没有最大化按纽的窗口

  着实也就是象软件的“关于我们”的谁人窗口一样,下面就是用对话

  框窗口来实现它。

  showModalDialog()以及showModelessDialog()

  1.用showModalDialog()

  www.veryhuo.com

  2.用showModelessDialog()

  www.veryhuo.com

  至于showModalDialog()与showModelessDialog()的区别,在于showModalDialog()打开的窗口(简称模式窗口),置在父窗口上,必需关

  闭才气会见父窗口(提议只管罕用,以免招人反感);showModelessDialog()

  (简称无模式窗口),打开后不必封锁也可会见父窗口打开的窗口。

  此刻我将这里的一些参数声名一下。

  dialogHeight: iHeight 配置对话框窗口的高度。

  dialogWidth: iWidth 配置对话框窗口的宽度。

  dialogLeft: iXPos 配置对话框窗口相对付桌面左上角的left位置。

  dialogTop: iYPos 配置对话框窗口相对付桌面左上角的top位置。

  center: {yes | no | 1 | 0 } 指定是否将对话框在桌面上居中,默认值是“yes”。

  help: {yes | no | 1 | 0 } 指定对话框窗口中是否表现上下文敏感的辅佐图标。默认值是“yes”。

  resizable: {yes | no | 1 | 0 } 指定是否对话框窗口巨细可变。默认值是“no”。

  status: {yes | no | 1 | 0 } 指定对话框窗口是否表现状态栏。对付非模式对话框窗口,默认值是“yes”;对付模式对话框窗口,默认值是 “no”。

  六、 弹出n 个窗口

  这很简朴,只要执行n 次window.open()就行了,虽然必然要给每个窗口起差异的名字,尚有,配置一下left和top,停止重叠。

  七、 革新之后就不再弹出窗口

  我们行使cookie来节制一下就可以了。

  起首,将如下代码插手主页面HTML的区:

  然后,用(留意不是openwin而是loadpop啊!) 替代主页面华夏有的这一句即可。你可以试着革新一下这个页面或从头进入该页面,窗口再也不会弹出了。

  八、 让弹出窗口顺应内里图片的巨细

  许多时辰我们必要提供这样的成果给会见者:当会见者点击页面中的缩略图时,其对应的全尺寸图片将表现在一个新的弹出窗口中供会见者查察。

  实现此成果的最简朴作法是用以下HTML代码建设一个图像链接:

  个中标志的href属性指定全尺寸图片的URL,target属性配置为_blank指定在新窗口中表现该图片;标志的src属性指定缩略图的URL。

  假如我们想对表现全尺寸图片的窗口的外面举办某些节制(好比但愿弹出窗口的高度、宽度能与全尺寸图片的巨细匹配时),则可挪用 window.open要领,该要领吸取三个参数,别离指定要打开文件的URL,窗口名及窗口特征,在窗口特征参数中可指定窗口的高度、宽度,是否表现菜单栏、器材栏等。以下代码将表现全尺寸图片在一个没有器材栏、地点栏、状态栏、菜单栏,宽、高别离为400、350的窗口中。

  这里就提出了个题目,假如全部全尺寸图片都具有同一的巨细(好比都是400×350),那么以上代码合用于全部的缩略图片链接(只是href属性指向的全尺寸图片文件差异)。但假如全尺寸图片的巨细并不同一,还用以上代码则我们必要先取得每幅全尺寸图片的巨细,然后在window.open要领的窗口

  特征参数中逐一配置height和width为正确的值,在图片数目较多的环境下,这显然服从太低了。那么是否有一劳永逸的要领,即让弹出窗口能自动顺应要表现图片的巨细?通过研究,发明可以行使 DHTML 中的 Image 工具来到达我们的目标,Image 工具可动态装载指定的图片,通过读取其 width 和 height 属性即能得到装入图片的巨细,以此来配置弹出窗口的巨细,即可实现自顺应图片巨细的弹出窗口了。下面等于实当代码:

  行使时将上面的代码放在网页文档的标志对中,然后在链接的点击变乱中挪用OpenFullSizeWindow函数,即可。以上代码在IE 5.x-6.0中测试通过。

  九、 较量机动的HTA窗口

  我简朴先容一下,HTA的全名为HTML Application,翻译过来就是HTML应用措施,你只要简朴的用.hta为扩展名生涯HTML页面就算建设了一个HTA文件,下面我们就用HTA来编个窗口,将以下这段代码生涯为.hta文件,然后再用赏识器打开看看吧。

  保举阅读 HTML中文手册:http://www.veryhuo.com/a/manual/html

(编辑:河北网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读