to accomplish that you need to get a bit imaginative in your layout. . What I have done in some of my projects with similar requirements is to add the field "Article Title Link" above the image:
Then I have configured that field to output the Raw URL and I have also carefully added the anchor tag html in the HTML Wrapper - Top:
This way EasyLayouts generates a code similar to this:
<a href="/ARTICLE_URL"><img src="/IMAGE_URL" />
Finally you need to close the anchor tag in the image field:
In my screenshots I use the image field and not a media custom field, but the logic is exactly the same in your scenario.
For the modal page, you can use a similar logic but using Bootstrap or UIKit modal API so that the content is triggered easily. Which CSS and JS framework is your site?