Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
午接到博客訪客的反饋,表示博客中的鏈接在原窗口打開的話,網站的體驗非常的不好,而自己又懶的一個個去修改博客網頁中的鏈接打開方式,就加了一個強制頁面所有鏈接新窗口打開的代碼,一招解決問題。
<base target="_blank">
將此代碼放到,網頁中的 <head>標簽之內即可實現,當前頁面所有A鏈接新窗口打開
<base>:標簽當前頁面上的所有的相對鏈接規定默認 URL 或 默認目標。
語法:
<base href="網址" target="打開的方式">
屬性;
herf:規定的默認鏈接
target:鏈接打開的方式,參數有 _blank,_self 等,與A標簽的 target 屬性相同
<base target="_blank">
<base target="_self">
<!DOCTYPE html> <html lang="en"> <head> <base href="https://www.feiniaomy.com" target="_blank"> <title>Document</title> </head> <body> <a href="/post/1.html">我是相對鏈接,我可以打開 https://www.feiniaomy.com/post/1.html</a> <a href="http://www.baidu.com">我是絕對鏈接,我可以打開 http://www.baidu.com</a> </body> </html>
1、一個頁面中,<base> 標簽只能出現一次
2、<base> 標簽只能在 <head></head>標簽中出現
3、<base> 屬于單標簽,沒有結束標簽,類似 <img> 標簽
TML+CSS+JS自主設計彈出窗口的方法,在線編輯器
html彈出一個小窗口的方法可能有很多,就比如本站(笨鳥工具-璞玉天成,大器晚成)的導航欄點擊之后會有一個小窗口(小頁面)彈出,然后文章頁面的底部有兩個小圖標,當鼠標懸放在上面的時候,也可以彈出一個小窗口,然后點擊下方實例代碼的試一試按鈕,也可以彈出一個小窗口,是本站提供的HTML+css+javascript的在線編輯器。這里介紹的一簡單的方法和一種自主設計的方法,不需要很復雜的程序設計,也不需要框架,用javascript和css就可以:
HTML+CSS+JS自主設計彈出窗口的方法,在線編輯器
這個方法需要結合html、css和javascript三種語言,即web三件套全得用上。該方法的原理就是將本來的窗口的style中display設置為none,當點擊按鈕之后,設置為block,并為該窗口綁定位置,實例代碼如下:
<div id="ck1"><p style='text-align:center;line-height:80px;'>這個窗口,可以說是自己設計的了,可以在這里添加其它的標簽和功能</p></div>
<button class='btn btn-default' onclick='show2()'>點擊彈出自己設計的小窗口</button>
<style>
#ck1{display:none;position:fixed;top:20%;left:20%;width:50%;height:80px;z-index:9999;background-color:skyblue;border-radius:5px;}
</style>
<script>
function show2(){
document.getElementById("ck1").style.display = "block";
}
</script>
HTML+CSS+JS自主設計彈出窗口的方法,在線編輯器
這個自主設計的方法中,除了display屬性的設置之外,另一個關鍵點在于z-index值的設置,html元素的排列堆疊,不僅有水平方向、豎直方向,還有深度方向,就像立體的直角坐標系當中,不僅有x軸、y軸,還有z軸,即z-index的設置可以修改div或html元素的z軸位置。
原文地址:html怎么彈出一個小窗口,自主設計方法,在線編輯器 - HTML教程
1),彈窗及參數說明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="#">
</head>
<body>
<input type="button" value="打開新窗口" onclick="openNewWin()" />
</body>
<script type="text/javascript">
function openNewWin() {
var openWindow = window.open("newTest.html",
"彈到新窗口",
"height=500, width=800, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no");
}
/***
(00) window.open 彈出新窗口的命令
(01) newTest.html 彈出窗口的文件名,或請求地址
(02) 彈出窗口的名字(不是文件名),非必須,可用空''代替
(03) height=100 窗口高度
(04) width=400 窗口寬度
(05) top=0 窗口距離屏幕上方的像素值
(06) left=0 窗口距離屏幕左側的像素值
(07) toolbar=no 是否顯示工具欄,yes為顯示
(08) menubar 表示菜單欄
(09) scrollbars 表示滾動欄
(10) resizable=no 是否允許改變窗口大小,yes為允許
(11) location=no 是否顯示地址欄,yes為允許
(12) status=no 是否顯示狀態欄內的信息(通常是文件已經打開),yes為允許
***/
</script>
</html>
(2),彈窗并居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="#">
</head>
<body>
<input type="button" value="彈出的窗口居中" onclick="testOpenCenterWindow()" />
</body>
<script type="text/javascript">
function testOpenCenterWindow() {
// 窗口垂直位置水平位置
var iTop = (window.screen.availHeight - 30 - 500) / 2;
var iLeft = (window.screen.availWidth - 10 - 800) / 2; //減width
var openWindow = window.open("newTest.html"
,"測試彈窗口并居中"
,"height=500, width=800, top="+ iTop
+", left="+ iLeft
+", toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no"
);
}
</script>
</html>
(3),窗口 location屬性
window對象location屬性是引用Location對象,它表示該窗口顯示文檔的URL
window.location.href="page1.jsp"; //當前窗口顯示指定頁面
window.close(); //關閉本頁面
(4),窗口與父窗口通信
*請認真填寫需求信息,我們會在24小時內與您取得聯系。