網站 / 使用 JavaScript 開啟新視窗跟對話窗

文章索引

Post Views: 2,090

很多網站會在文章內容設定某些關鍵字可以開啟新視窗，或者對話窗

我也想嘗試替網站增加這個功能

由於WordPress網站使用PHP語言，這主要是用在網站後端的程式語言

在前端頁面設定功能通常是用JavaScript前端程式語言

因此必須處理如何在WordPress網站使用JavaScript的問題

要在WordPress網站使用JavaScript的方式可以透過之前使用過的兩個外掛來達成

「PHP everywhere」跟「程式碼片段」

程式碼片段可以直接輸入程式碼，不需要額外用echo

而PHP everywhere 可以在文章中崁入JavaScript程式碼(例如：加在文章的最後面)

這次改用另一個外掛「Code Embed」，算是結合前面兩種的特色

1.可以決定在文章的哪個位置插入程式碼，這樣可以避免資料尚未載入，程式就已經執行而造成錯誤

2.不需要額外加 echo 串接程式碼

但是，仍然必須將代表jQuery的$符號改用文字-jQuery表示

以下是最終的成果

這個是對話窗的程式，將要呈現的內容包覆在<div id=”dialog2″></div>之內

並且在文章內選定的文字設定id為opener2的超連結

<script>
	jQuery(function(){
		jQuery("#dialog2").dialog({
			position: {my: "left top", at: "right bottom", of: "#opener2"},
			width: 600,
			autoOpen: false,
			show: {effect: "blind",duration: 1000},
			hide: {effect: "blind",duration: 1000}}
		);
		jQuery("#opener2").on("click", function(event){
			jQuery("#dialog").dialog("open");
			event.preventDefault()
			}
		);
	});
</script>

需要注意的是定位的設定

position: {my: “left top”, at: “right bottom”, of: “#opener2”}→用自己(對話窗)的左上對準 #opener2(超連結文字)的右下

my-被定位元素對準目標元素的地方
at-目標元素被對準的地方
of-目標元素
方位：左中右上中下

這個是開新視窗的程式，必須使用window.open(目標網址, 視窗標題, config)設定內容

同樣在選定的文字設定id為ad2的超連結

<script>
	var me2 = document.getElementById('ad2')
	me2.addEventListener('click',
		function(e){window.open('http://tw.yahoo.com','Yahoo',config='height=450,width=600,toolbar=no,location=no,menubar=no,status=no');e.preventDefault()}		
	)
</script>