iT邦幫忙

0

【如何讓 div 彈出的小視窗像 alert 一樣的效果 ???】

以下是簡單的程式碼

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

看更多先前的討論...收起先前的討論...
外獅佬 iT邦大師 1 級 ‧ 2013-05-21 16:33:10 檢舉
會排斥使用3rd party library?
不會的話,可以使用jQuery UI Diaog
外獅佬 iT邦大師 1 級 ‧ 2013-05-21 16:35:19 檢舉
或者,也可以使用YUI
bigsmile iT邦新手 4 級 ‧ 2013-05-21 17:13:31 檢舉
原理就是先開一個透明背景的div,遮住頁面,這個div上面再放你自製的alert div,這樣你要放什麼東西在alert div上都可以,然後關閉時,再把背景div拿掉,就ok了。

不過,如果沒什麼特別考量,wiselou的建議不錯,用第三方面的解決方案會快很多,除了jQuery和YUI之外,bootstrap也可以考慮

http://twitter.github.io/bootstrap/javascript.html#modals
andyto202 iT邦研究生 4 級 ‧ 2013-05-21 22:15:56 檢舉
wiselou 兄,您說的那個例子我今天有找到過
<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>


我有改了一下
插入
<input type="button" value="訊息顯示" onclick="alert('test!!')">

結果在執行時 dialog 尚未消失前
還是可以按下按鈕啊
>_<
andyto202 iT邦研究生 4 級 ‧ 2013-05-21 22:30:34 檢舉
我知道怎麼弄了
這樣子就可以了
<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>
外獅佬 iT邦大師 1 級 ‧ 2013-05-22 08:57:49 檢舉
讚

1 個回答

0
markyeh
iT邦新手 5 級 ‧ 2013-05-24 11:26:06

可以用 jquery ui 裡的 dialog (http://jqueryui.com/dialog/)
或是搜尋關鍵字 "lightbox", 有很多套件跟範例
有一套還不錯用的叫做 colorbox (http://www.jacklmoore.com/colorbox/).

但以上講的東西, 你必須先懂什麼是 jQuery (http://jquery.com/)

我要發表回答

立即登入回答