다음을 통해 공유

Yours modally

  • 아티클

I can see a gray Seattle skyline as I stare out of my window on what should have ideally been a nice Sunday evening in spring time. It is pouring buckets and the view is hazy, reminding me of the html hidden behind the gray modal popup background. I am unable to get out of my apartment and hit downtown before the showers stop because winter seems to be stuck modally in Seattle, just as I am unable to access the webpage till I dismiss the popup. Does it sound like I am obsessed with the ModalPopup? Well, not exactly. I am trying to add some more functionality to it and am stuck, unable to proceed and not liking it, hence the analogy to get the message across.

The ModalPopup is already a loaded extender. The behavior encapsulates PopupBehavior, DragBehavior and DropShadowBehavior. Having made the ModalPopup draggable, I thought it would be interesting to make it resizable as well. Although, adding the ResizableControlBehavior problem turned out to be harder than I had expected.

Here is a brief overview on how the ModalPopup works.

TargetControl: The control whose click event causes the popup to show.

PopupControl: The popup that will be shown modally.

If DragDrop and DropShadow functionalities are turned on the ModalPopup, the markup will be arranged in the following way which is quite tedious with the positioning of all elements needed to be handled correctly.

<OuterContainerDiv> // created by the ModalPopupBehavior

     <PopupControl> // what the user passes as the Popup

       <DragHandleDiv /> // control that the user would like to see as the DragHandle

    </PopupControl>

    <DropShadowDiv /> // DropShadow div created by the behavior

</OuterContainerDiv>

<BackGroundDiv />

What do I have so far? The ResizableBehavior has been added to the PopupControl and tracking is turned on, on the DropShadow so that it gets redrawn when PopupControl is resized. Overflow is set to "auto" on the PopupControl. The problem is that the resize handle gets hidden behind the scroll bars, which means that I need to scroll to bring it into view before I can resize it. If only the resize handle could be placed right at the intersection of the two scroll bars!

A better, but more long winded option would be to write a ResizableScrollBar extender that adds custom scroll bars to panels if necessary just like the built-in html overflow support and allows the panel to be resized as well. In which case the user would have more control on the resize handles and scroll bars. The Slider behavior could be repurposed to be an html scroll bar perhaps and the extender would have to perform the calculations to scroll properly. Any other ideas to dismiss this "modal" issue?