I’ve been starting to look at Atlas or more specifically at the Control toolkit.
The control that immediately peeked my interest was the ModalPopup.
Now looking at the behaviour of the control the default behaviour of the control when the OkControlID pressed is for the ModalPopup to close. Now this is fine if you have nothing to validate before you close it, but in my scenario I wanted to check that certain criteria had been completed before the popup closes.
Basically the behaviour I required was that if I set the OnOkScript of the control I wanted to control the closing of the popup myself within that script, where if I didn’t set the OnOkScript property I wanted the control to handle it’s own closing.
Ok so I downloaded the control kit from here and fired up the solution.
The code you need to change is in the ModalPopupBehavior.js. You need to find this
this._onOk = function() {
this._hide();
event.returnValue = false;
if (_OnOkScript) {
window.setTimeout(_OnOkScript
, 0);
}
return false;
}
to this.
this._onOk =
function() {
event.returnValue = false;
if(_OnOkScript)
{
window.setTimeout(_OnOkScript, 0);
}
else {
this._hide();
}
return false;
}
Compile the project and then reference it in your project. You will now find that if you set the OnOkScript the modal popup will not hide on click of the OkControlID and if you don’t have the property set it will hide.
The final bit of code you will need is the Javascript to hide the modal. Again it’s very simple and you just drop this in you OnOkScript function.
function onOk() {
//do you work here and if it’s ok to hide the modal
$object('ModalPopupProperties ')._hide();
}
Note: You need to add a ID to your properties tag. e.g.
<atlasToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server">
<atlasToolkit:ModalPopupProperties id="ModalPopupProperties" TargetControlID="LinkButton1" PopupControlID="Panel1" BackgroundCssClass="modalBackground" DropShadow="true" OkControlID="OkButton" OnOkScript="onOk()" CancelControlID="CancelButton" />
</atlasToolkit:ModalPopupExtender>
And that’s it. Hope that helps.