以下是簡單的程式碼
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>Test</title>
<body onload="alert('test');">
<input type="button" value="test">
以下是執行畫面
但是由於 alert 裡面的文字
就是一般的文字
無法改變其文字大小、顏色
甚至放表格等等
我後來有爬文
網路上是用 javascript + div 的方式
但是雖然弄出來的效果可以讓彈出 div 在最上層
但是原頁面的按鈕還是可以按
程式碼如下
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>Test</title>
<script language="javascript">
function myAlert(str){
var txt="<font color='red'>"+str+"</font>";
document.getElementById("message").innerHTML=txt;
document.getElementById("layer1").style.visibility="visible";
}
function hiddenAlert(){
document.getElementById("layer1").style.visibility="hidden"
}
</script>
<input type="button" value="訊息顯示" onclick="myAlert('Hello Javascript!!')">
<div style="border-style:solid; border-width:1px; position: absolute; width: 100px; height: 100px; z-index: 1; left: 447px; top: 275px; visibility:hidden; background-color:#C0C0C0" id="layer1">
<table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%">
<tr><td bgcolor="#000080" height="20"><font color="#FFFFFF">提示訊息</font></td></tr>
<tr><td nowrap><span id="message">Test 123</span></td></tr>
<tr><td align="center"><input type="button" value="ok" onclick="hiddenAlert()"></td></tr>
</table>
</div>
請問有什麼方法
做出效果像 alert 這樣(就是小視窗出來，原視窗都不能動作)
但小視窗又可以放圖片或表格等等的東西
謝謝
已邀請的邦友 {{ invite_list.length }}/5
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<input type="button" value="訊息顯示" onclick="alert('test!!')">
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
</head>
<body>
<input type="button" value="訊息顯示" onclick="alert('test!!')">
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
可以用 jquery ui 裡的 dialog (http://jqueryui.com/dialog/)
或是搜尋關鍵字 "lightbox", 有很多套件跟範例
有一套還不錯用的叫做 colorbox (http://www.jacklmoore.com/colorbox/).
但以上講的東西, 你必須先懂什麼是 jQuery (http://jquery.com/)
iThome鐵人賽
看影片追技術