以下是簡單的程式碼
<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 這樣(就是小視窗出來,原視窗都不能動作)
但小視窗又可以放圖片或表格等等的東西
謝謝
<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/)