I'll try to reply in the most Hype-specific ways. Do note that there might be libraries that could be integrated faster/easier (for example, tumult.com uses fancybox), but often staying within the Hype-realm can give better design flexibility.
In general you would create a group of elements or symbol that represents your popup. This would then have its own timeline animations that would be triggered to show with an animation of the Display property in the Element Inspector going from Hidden to Visible. Using Display will make it not receive clicks/mouse actions while hidden. You can optionally add an opacity animation if you want a smooth fade in.
The width/height you probably want is what you would define in the editor. If you need the site or the overlay to be resized, you can use the Flexible Layout system. Alternatively if you're looking for programmatic control there is the Hype setElementProperty() API that can adjust width / height (or scaleX and scaleY), but this probably isn't what you want.
Similarly to the first item, you would add an On Mouse Click action to a close button element in your overlay group/symbol that would run a timeline that animates the group from Visible to Hidden to close.
You can add a Rectangle element, and then choose Edit > Edit Element's Inner HTML. This will let you add an <img> HTML tag with an externally referenced image.
You could simply make a rectangle element that covers the entire scene as part of your group. This would capture clicks so anything underneath won't respond.
You may also want to stop the window/document scrolling.
I have used this in the past.
It gets called for example when the overlay is shown (via timeline keyframe action) and when the close overlay button is clicked. ( same timeline in reverse )
Using will stop the document scrolling behind the overlay.
Here is a stripped down version of something I wrote a while back. It is only an example and will not be perfect for your needs but shows you what I am explaining.