Set focus on SharePoint 2013 Modal dialog

Question

I am opening popup modal with below JavaScript code, which is working correctly. But is it possible that when modal dialog opens, cursor or focus should be on modal dialog rather than on parent page.

Please note that modal dialog have only text

javascript:OpenPopUpPage("../Pages/XXX.aspx", null, Width, Height)

Answer 1

Add below div and style to parent page

<div id="dlgpopup" class="ms-dlgOverlay" style="display:none; z-index: 1504; width: 100%; height:100%;"></div>

<style> 
.ms-dlgOverlay {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
     opacity: 0.4;
     background-color: #999;
     display: none; 
} </style>

Set z-index:1505 to your dialog box

Add below script before open modal popup

document.getElementById("dlgpopup").style.display = 'block';

Answer 2

I could solve the issue as below, hope it helps to some else

$("#id").click(function () {
            OpenPopUpPage("XXX.aspx", null, null, null)
            setTimeout(setFocusModalDialog, 100);
            return false;
        })
    });
    function setFocusModalDialog() {
        var iframe = $(".ms-dlgFrame")[0];
        iframe.contentWindow.focus();
    }