ASP.NET 利用 BlockUI 做為文章預覽畫面

作法：
當文章送出之前，以BlockUI產生一個文章預覽畫面，這樣就不用再多做一個頁面顯示了，也不影響Server的效能。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
前端
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

$('#MakeSure').click(function() {
$.unblockUI();
//執行 指定輸入功能
WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("LoginView1$FormView1$InsertButton" , "", true,"" ,"" , false, true)) ;
return true;
});

$('#CancelInput').click(function() {
$.unblockUI();
return false;
});

/* 取消預定寫入事件，以預覽文章視窗替代 */
/*------------------------------------------------------------------------------------------------*/
$("#LoginView1_FormView1_InsertButton").click(function() {
// 寫入 預覽內容!
var Sub=$("#LoginView1_FormView1_txtSubject").val();
var XXX=$("#LoginView1_FormView1_txtContent").val();
// 避免特殊符號寫入文章內容
XXX=XXX.replace(/[\!\\+=_\[\]#$%^&*|"';?/><,.]/g,''); // 確定要顯示內容的相對位置 請配合 CSS對於相關區塊的語法 var FormWidth= 770; var FormHeight= 300; var lPos= (screen.width/2)-(FormWidth/2) +'px' ; //var tPos= (screen.height /2)-(FormHeight/2) +'px'; var tPos= '50px'; FormWidth=FormWidth+ 'px'; XXX =XXX.replace(/\n/g,'
'); // textarea 回車符號
$("#AricleResult").html('標題：' + Sub + '

'+ XXX);
$.blockUI({ message: $('#ArtPreview'), css: { width: FormWidth ,top: tPos , left: lPos } });
// $.blockUI({ message: $('#ArtPreview'), css: { width: '400px' } });
return false;
});

預覽結果

請注意!! 系統會自動排除半形的特殊符號(例如:#$%^&*|"'<>等)。請改以全形符號取代(例如： ＃＄％︿＆＊＂’＜＞等)