MVC Widget, jquery and popup content block
Hello all.
Here's my scenario.
I currently have an MVC web app that I am bringing under SF. At present I have the following markup:
<
script
type
=
"text/javascript"
>
$(document).ready(function ()
SetupPopupHelpDiv(new Array(
source: 'popup1', target: 'PopupContent1', height: 100
));
);
</
script
>
@using (Html.BeginFormSitefinity())
<
div
class
=
"popupHelp"
>
</
div
>
<
ul
class
=
"areaHighlight"
>
<
li
>
<
div
class
=
"editor-label"
>
<
label
for
=
"NuisanceSolutions"
>
Have appropriate <
span
class
=
"PopupHighlight popup1"
>noise abatement solutions
</
span
>been implemented?</
label
>
</
div
>
</
li
>
</
ul
>
<
div
class
=
"PopupContent1"
style
=
"display: none"
>
<
h1
>Helper here</
h1
>
<
h2
>Content To Go Here
</
h2
>
</
div
>
//Popup help div support.
function SetupPopupHelpDiv(links)
//Insert the inner section of the popup help div, just the placeholder required in the page itself.
var template = ['<
div
class
=
"popupHelp-Outer"
>',
'<
div
class
=
"popupHelp-Close"
></
div
>',
'<
p
class
=
"PopupHelp-Title"
>Popup window title</
p
>',
'<
div
class
=
"popupHelp-Inner"
>',
'<
p
class
=
"popupHelp-Content"
>Content to go here</
p
>',
'</
div
>',
'</
div
>'].join('');
$('.popupHelp').html(template);
$('.popupHelp-Close').click(function () $('.popupHelp').hide("fast"); );
$.each(links, function (index, value)
// alert(index + " " + value.source + " : " + value.target);
var showFunc = function ()
$('.PopupHelp-Title').html($('.' + value.target + ' H1').html());
$('.popupHelp-Content').html($('.' + value.target + ' H2').html());
$('.popupHelp-Inner').css('height', value.height);
$('.popupHelp').show("fast");
;
$('.' + value.source).hoverIntent(showFunc, HidePopup);
);
function HidePopup()
//Do nothing, hoverIntent requires an 'out' function to be provided.
<
script
type
=
"text/javascript"
>
$(document).ready(function ()
SetupPopupHelpDiv(new Array(
source: 'popup1', target: 'PopupContent1', height: 100
,
source: 'popup1', target: 'PopupContent2', height: 100
));
);
</
script
>
I was being a tool.
<div class="popupHelp"></div>
<p style="display: none;">SHOW ME SHOW ME!!! </p>
Where the content block CSSClass is PopupContent1
Rather than using the 75/25 layout, it might be better to place the editable popup widget part under the rest. That way, it wouldn't take up any layout space when the popup is closed, it should just collapse. Yet, it would remain editable.
Hi Dan.
We're actually running with that idea. Works well and looks really good.