Problem:
Recently, someone asked me to generate a popup window for some customized list or links.
In the following example, the list is hidden from user. I created a customize link to display the list item.
Originally, I thought just simply copy SharePoint's link and modify it, it would work. Similar idea has found in: http://kaoruiscoding.blogspot.com/
<a onfocus="OnLink(this)" href=<your url> onclick="EditLink2(this,{$ViewCounter});return false;" target="_self">This is a test title</a>
Unfortunately, it doesn't do the job.
Solution1:
So, I did some search on Internet, and sounds like AJAX
I tried some code from http://www.bitsofsharepoint.com/ExamplePoint/Site/LoadTipOriginal.aspx
<style type=text/css>
#loadTip{
background: #6F9DD9;
color: #fff;
border: 2px solid #6F9DD9;
font-size: 10px;
padding: 3px;
width: 342px;
display: none;
position: absolute;
text-align: right;
}
#tipContent {
background: #fff;
padding: 3px;
}
</style>
<SCRIPT type=text/javascript>
if (typeof jQuery == 'undefined') {
var jQPath = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3/'
document.write('<script src="', jQPath, 'jquery.min.js" type="text/javascript"><\/script>');
}
</SCRIPT>
<SCRIPT type=text/javascript>
function handleError() {
return true;
}
function initLoadTip(group) {
var loadTip = $("#loadTip");
if (!group) group = "#MSO_ContentTable";
var arrayList = $(group + " a[href*='DispForm.aspx']");
$.each(arrayList, function (i, e) {
var a = $(e).attr("href").split("#");
$.data(e, "dispTarget", a[0]);
$(e).mouseenter(function (event) {
var cssShow = { "top": event.pageY, "left": event.pageX + 10 };
if ($.data(loadTip, "dispTarget") && $.data(loadTip,"dispTarget") == $.data(e,"dispTarget"))
{
loadTip.css(cssShow).show();
} else {
if (loadTip.timer) clearTimeout(loadTip.timer);
loadTip.timer = setTimeout(function () {
$("#tipContent").load(a[0] + " .ms-formtable", function () {
loadTip.css(cssShow).show();
$.data(loadTip, "dispTarget", a[0]);
});
}, 200);
}
});
loadTip.click(function () {
loadTip.hide();
});
});
}
function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {
$("#tbod" + groupName + "_").attr("isloaded", isLoaded)
.html(htmlToRender)
.show("fast", initLoadTip("#tbod" + groupName + "_"));
}
$(function () {
window.onerror = handleError;
$(document.createElement("div")).attr("id", "loadTip")
.html("<span>click to close </span><img style='vertical-align:text-top;' src='/_layouts/images/menudark.gif' alt=''/>")
.appendTo("body");
$(document.createElement("div")).attr("id", "tipContent")
.appendTo("#loadTip");
initLoadTip();
});
</SCRIPT>
It's a nice and easy way to do it. The only two things you need to change in the code are:
If you want to apply it to any other links you want, change "#MSO_ContentTable" to your div id.
if (!group) group = "#MSO_ContentTable";
var arrayList = $(group + " a[href*='DispForm.aspx']");
If the link is not DispForm.aspx, in my case, it is listform.aspx, simply change " a[href*='DispForm.aspx']" to listform.aspx.
Everything is working fine for me, except my <div> code is in another jQuery script, which doesn't apply.
Solution2:
Therefore, I have to find another way to do so: using the SharePoint default popup window.
Link: http://erikswenson.blogspot.com/2010/09/how-to-create-hyperlink-to-modal-pop-up.html Thanks for Erik Swenson.
Note: it works on SP 2010 only.
<a onclick="javascript:NewItem2(event,"http://<your url>"); javascript:return false;"
href="#" target="_self"> This is a test title</a>
Very simple, very useful. What you need to change is only <your url> part in the above code. It is a SharePoint default popup. So don't need to make a fake one and worry about css styles on your SP.
If you are not sure how to dynamically change <your url>:
myURL = String.Format("{0}/_layouts/listform.aspx?PageType=4&ListId={{{1}}}&ID={2}&ContentTypeID={3}", myWeb.Url, myList.ID.ToString, myItem.ID.ToString, myItem.ContentTypeId.ToString)
popupURL = "<a onclick=""javascript:NewItem2(event,"" + myURL + ""); javascript:return false;"" href=""#"" target=""_self"">" + myTitle + "</a>"
