クライアントサイドで外部サイトのページをモーダルウィンドウで表示する

外部サイトのページに誘導する必要があったが、別ウィンドウや別タブで開くとユーザビリティが低下するため、モーダルウィンドウで対応したかった。
モーダルウィンドウをクライアントサイドで実装し、表示するURLや閉じた際の処理はサーバーサイドで実装する。

「開く」ボタンを押下時にモーダルウィンドウを表示する。
モーダルウィンドウの中にIframeでページを埋め込む。

main.aspx

<div id="customModal">
    <div id="customModalContent">
        <span id="closeModal" onclick="closeModalPopup()">✖</span>
        <iframe id="modalIframe" src="" width="100%" height="100%" frameborder="0"></iframe>
    </div>
</div>

<style>
/* モーダルの背景（オーバーレイ） */
#customModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
}

/* モーダルウィンドウ本体 */
#customModalContent {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background: white;
     padding: 20px;
     width: 90vw;
     max-width: 1200px;
     height: 80vh;
     max-height: 600px;
     border-radius: 10px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
     overflow: auto;
 }
    
 /* 閉じるボタン */
 #closeModal {
     position: absolute;
     top: 10px;
     right: 10px;
     cursor: pointer;
     font-size: 18px;
 }  
</style>

<script type="text/javascript">
function openModalPopup(url) {
    document.getElementById('modalIframe').src = url;
    document.getElementById('customModal').style.display = 'block';
}

function closeModalPopup() {
    document.getElementById('customModal').style.display = 'none';
    __doPostBack('PopupClosed', ''); // ASP.NET 側の処理を呼ぶ
}
</script>

main.aspx.vb

Private Sub lbtnOpen_Click(sender As Object, e As EventArgs) Handles lbtnOpen.Click
    'URLを作成する処理
    Dim url As String = String.Empty
    CreateURL(url)

    'モーダルウィンドウを開く処理
    OpenModal(url)
End Sub

Private Sub OpenModal(url As String)
    Dim script As String = "openModalPopup('" & url & "');"
    ScriptManager.RegisterStartupScript(Me, Me.GetType(), "OpenPopup", script, True)
End Sub

'モーダルウィンドウを閉じた際の処理
Public Sub RaisePostBackEvent(ByVal eventArgument As String) Implements IPostBackEventHandler.RaisePostBackEvent
    '画面を更新するなど必要に応じて
End Sub