Chắc hẳn forum các bạn đang sử dụng thông điệp yêu thương bằng colorbox.
==>Khoảng này khỏi phải nói nữa nhĩ.
Còn nếu chưa thì:

Code:


    <link rel="stylesheet" href="http://colorpowered.com/colorbox/core/example5/colorbox.css" type="text/css" />
    <script src="http://colorpowered.com/colorbox/core/colorbox/jquery.colorbox.js"></script>

Cho vào header.
Xong đến phần tạo music box:
Vào Admin cp==>display==>portal==>mod_news
Thay thế toàn bộ code trong đó lại bằng code:

Code:


    <script>
    jQuery(document).ready(function(){
    jQuery(".guibai").colorbox({inline:true, href:"#form"});
    jQuery(".mainoption").click(function(){setTimeout($.colorbox.remove, 1500);});
    jQuery(".xemlyric").colorbox({inline:true, href:"#lyric", width:"400px"});
    jQuery(".xemtiep").colorbox({inline:true, href:"#xemcm", width:"400px"});
    $(".abcxx").fadeIn(5000);
    $(".h3").click(function(){$(".abcxx").slideToggle("slow");});
    });
    function doit(){
    if (document.forms["post"]["checkbox"].checked==true)
    {
    document.forms["post"]["a1"].disabled=true;
    document.forms["post"]["a2"].disabled=true;
    document.forms["post"]["a3"].disabled=true;
    document.forms["post"]["a4"].disabled=true;
    x= document.forms["post"]["a1"].value;
    x=x.replace("/FLASH", "/flash");
    x=x.replace("FLASH", "flash(300,61)");
    y= document.forms["post"]["a2"].value;
    z= document.forms["post"]["a3"].value;
    k= document.forms["post"]["a4"].value;
    document.forms["post"]["vnteen123"].value = x+"
    "+"<div class='xxx'><marquee behavior='scroll' onmouseover='this.stop()' onmouseout='this.start()' scrollamount='1' scrolldelay='20' direction='left' truespeed='truespeed'>"+""+y+""+"</marquee></div>"+"<div style='display:none'><div id='lyric' style='display:block'><p>
    "+z+"<br/></p></div></div>"+"<div style='display:none'><div id='xemcm' style='display:block'>" + k +"</div></div>";
    }
    else{
    document.forms["post"]["a1"].disabled=false;
    document.forms["post"]["a2"].disabled=false;
    document.forms["post"]["a3"].disabled=false;
    document.forms["post"]["a4"].disabled=false;
    document.forms["post"]["vnteen123"].value = '';
    }

    }
    </script>
    <table style="background-image:url('http://pacitaumc.files.wordpress.com/2011/03/197529_1880099320764_1189731094_2359435_2406714_n.jpg');margin:0;" class="chitho">
    <tr><td align="center" ><table><tr><td><span class="h3">Music Box</span></td></tr></table><td></tr>


    <tr class="abcxx" style="display:none">
    <!-- BEGIN post_row -->

    <td >
    <table><tr>
    <td width="300px">

    <table>

    <tr><td>
    <div id="we"><div>Người yêu cầu:<b>{post_row.POSTER}</b></div></div>
    </td></tr>
    <tr><td>
    <div id="we"><div>Người nhận:<b><font color="red"><a href="{post_row.U_READ_FULL}">{post_row.TITLE}</a></font></b></div></div>
    </td></tr>
    <tr><td>
    <div id="we"><div>Vào lúc:<b><font color="red">{post_row.TIME}</font></b></div></div>
    </td></tr>
    <tr><td>

    <input onmouseover="showtip('Gửi bài');" onmouseout="hidetip();" onclick="" class="guibai" name="" value="Gửi Nhạc" type="submit" />
    </td></tr>
    </table>
    </td>

    <td width="430px">
    <div align="right"><input onmouseover="showtip('Xem bài khác');" onmouseout="hidetip();" onclick="" class="xemtiep" name="joingroup" value="Lời Tâm Sự" type="submit" /></div>
    <div align="center">{post_row.TEXT}</div>
    <div align="right"><input onmouseover="showtip('Xem Lyric');" onmouseout="hidetip();" onclick="" class="xemlyric" name="joingroup" value="Xem Lyric" type="submit" /></div>
    </td>
    </tr></table>


    </td>

    <!-- END post_row -->

    </tr></table>
    <div style="display:none">
    <div id="form" style="display:block">
    <form target="abcd" action="/posting.forum" method="post" name="post" onsubmit="return vB_Editor['text_editor'].prepare_submit(0,0)" enctype="multipart/form-data"><table width="420px" border="0" cellspacing="1" cellpadding="0"><tr><td width="22%"><span class="gen"><b><font color="#23eb41">Gửi đến</font></b></span></td><td>
    <input class="post gen" style="width:230px; display:inline" type="text" name="subject" value="Tất cả" onblur="if(this.value=='') this.value='Tất cả';" onfocus="if(this.value=='Tất cả') this.value='';"  size="45" maxlength="40" tabindex="2" title="" onkeypress="if (event.keyCode==13){return false}"></span> <input onclick="set_solved(this.form.elements['subject'],''), vtdyt()" class="mainoption"  type="submit" name="post" value="Gửi" tabindex="6" accesskey="s" />
    </td></tr><tr><td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="1"><tr><td><a onmouseover="showtip('<font size=4.5>SOẠN BBCODE THÔNG ĐIỆP</font><br><font color=green>Coppy đoạn mã được tạo ra và paste vào đây!</font>');" onmouseout="hidetip();" ><blink><b>Lấy code</b></blink></a></td></tr></table></td><td valign="top"><table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td colspan="9"><span class="gensmall" style="width:550px;font-size:10px" id="helpbox"></span></td></tr><tr><td colspan="9">
    <span class="gen">

    <input id="a1"  style="width:320px; display:inline" type="text" value="Dán đoạn mã bạn nhìn thấy vào đây!" onblur="if(this.value=='') this.value='Dán đoạn mã bạn nhìn thấy vào đây!';" onfocus="if(this.value=='Dán đoạn mã bạn nhìn thấy vào đây!') this.value='';"  onclick="storeCaret(this)" onkeyup="storeCaret(this)" rows="15" cols="35" tabindex="3" onselect="storeCaret(this)" wrap="virtual" maxlength="777" />
    <br/>
    <input id="a2"  style="width:320px; display:inline" type="text"  value="Lời muốn nói" onblur="if(this.value=='') this.value='Lời muốn nói';" onfocus="if(this.value=='Lời muốn nói') this.value='';"  onclick="storeCaret(this)" onkeyup="storeCaret(this)" rows="15" cols="35" tabindex="3" onselect="storeCaret(this)" wrap="virtual" maxlength="777" />


    <input id="a4"  style="width:320px; display:inline" type="text"  value="Tâm sự của bạn" onblur="if(this.value=='') this.value='Tâm sự của bạn';" onfocus="if(this.value=='Tâm sự của bạn') this.value='';"  onclick="storeCaret(this)" onkeyup="storeCaret(this)" rows="15" cols="35" tabindex="3" onselect="storeCaret(this)" wrap="virtual" maxlength="777" />


    <textarea id="a3"  style="width:320px; height:50px;display:inline" type="text"  value="Lyric" onblur="if(this.value=='') this.value='Lyric';" onfocus="if(this.value=='Lyric') this.value='';"  onclick="storeCaret(this)" onkeyup="storeCaret(this)" rows="15" cols="35" tabindex="3" onselect="storeCaret(this)"  >Nhập lyric vào đây</textarea>




    <input id="vnteen123" class="gen" style="width: 270px;display:none" onclick="storeCaret(this)" onkeyup="storeCaret(this)" name="message" rows="1" cols="35" tabindex="3" onselect="storeCaret(this)" wrap="virtual" />
    <input type="checkbox" name="checkbox" value="Chấp nhận" onclick="doit()">Chấp nhận</input>

    <span id="counter_number" class="counter"></span></span>
    </td></tr></table></td></tr>
    </table>
    <input type="hidden" name="lt" value="0" /><input type="hidden" name="mode" value="newtopic" /><input type="hidden" name="f" value="4" /></form>
    </div></div>

    <iframe height="0" width="0" frameborder="0" name="abcd"></iframe>


Xong music box cơ bản.
Đến phần làm đep...)(Rất tiếc cho ai xài trình duyệt web bản củ vì không thấy được cái đẹp của nó)
Cho vào css:

Code:

    /*        Music box      */
    #we div {
      color: #cdcdcd;
      text-transform: uppercase;
      font: 100 15px Helvetica, Arial, Sans-Serif;
      -webkit-transition: all 0.2s ease-out;
      -moz-transition: all 0.2s ease-out;
      -o-transition:all 0.2s ease-out;
    }
    #we div:nth-child(1) { font-size: 12px; letter-spacing: 1px;}
    #we div:nth-child(2) { font-size: 12px; letter-spacing: 0.6px}
    #we div:nth-child(3) { font-size: 12px; letter-spacing: 0.2px}
    #we div:hover {
      text-shadow: 3px 3px 3px #000;
      -webkit-transform: scale(1.1);
      -moz-transform: scale(1.1);
      -o-transform: sacle(1.1);
    }

    .h3 {
      padding: 0px 0;
      color: #666;
      font: 900 35px "Trebuchet MS", Arial, Helvetica, sans-serif;
      text-shadow: 1px 1px #000, 2px 2px #000, 3px 3px #000, 4px 4px #000;
      -webkit-transition: all 0.2s ease-out;
      -moz-transition:all 0.2s ease-out;
      -o-tramsition:all 0.2s ease-out
      }
    .xxx{
    background-color: #ffffff;
    display: inline-block;
      border: solid 1px #000;
      overflow: hidden;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
      -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

    color: #ff0000;
    text-shadow: 1px;
    }
    .h3:hover {
      color:#fff;
      position:relative; top:-3px; left:-3px;
      text-shadow: 1px 1px #409FFF, 2px 2px #409FFF, 3px 3px #409FFF, 4px 4px #409FFF, 5px 5px #FF8080, 6px 6px #FF8080, 7px 7px #FF8080, 8px 8px #FF8080, 9px 9px #F1FB42, 10px 10px #F1FB42, 11px 11px #F1FB42, 12px 12px #F1FB42;}
    .chitho {
      display: inline-block;
      border: solid 1px #000;
      overflow: hidden;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
      -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    max-width:730px;
    margin: 0 auto;
    }