locked
Z-Index Bootstrap Modal <object> layering problem RRS feed

  • Question

  • User-851967432 posted

    Hello all,

    I have an object element that's sitting on top of everything. My dropdown menu's hide behind it. My bootstrap modal's hide behind it.

    I've spent more than 2 days now scouring the internet changing z-indexes and positions with no luck.

    Is there an easy fix to just place the <object> behind everything?

    Appreciated any feedback,

    Adam Turner

    Wednesday, February 1, 2017 5:51 PM

Answers

  • User-851967432 posted

    I just ended up hiding and showing for now:

    $(document).ready(function () {
        $('#CatRoleModal').on('shown.bs.modal', function () {
            $('#ddlCategory').focus();
            $('#WinFormsDocumentView').hide();
        })
        $('#QueueResultModal').on('shown.bs.modal', function () {
            $('#tblQueueResults_filter input').focus();
            $('#WinFormsDocumentView').hide();
        })
    
        $('#CatRoleModal').on('hidden.bs.modal', function () {
            $('#WinFormsDocumentView').show();
        })
        $('#QueueResultModal').on('hidden.bs.modal', function () {
            $('#WinFormsDocumentView').show();
        })
    
        $('#navbar').on('click', function () {
            $('#WinFormsDocumentView').hide();
        });
    
        $(document).on('click', function () {
            if ($('#WinFormsDocumentView').css('display') == 'none')
            {
                $('#WinFormsDocumentView').show();
            }
        });
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, February 3, 2017 4:20 PM

All replies

  • User475983607 posted

    It's helpful if you post source code and describe the steps you've tried so far.  According to MDN z-index is not a property of the object element.

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object

    According to flash blogs/forums add the following param and set the z-index of the elements you want on top of the object.

    <param name="wmode" value="transparent">

    https://css-tricks.com/snippets/html/keep-flash-behind-other-elements/


     

    Wednesday, February 1, 2017 6:07 PM
  • User-474980206 posted

    generally an <object> tag creates a window in front the browser window, so no html can be in front (flash has some workarounds). in this case you need to create a new window infront of the object. you can just use an <iframe> to do this. so when you display a dropdown, you create, size and position and iframe in the correct spot, then render the dropdown or modal html and css in the iframe. delegate events back up to the parent frame.

    hint: in the old days, in IE a <select> was its own window and the same technique was required. you can still find these examples.

    another less elegant technique is to hide the object when the dropdown or modal are required.

    Wednesday, February 1, 2017 10:39 PM
  • User-1838255255 posted

    Hi adamturner34,

    According to your description, as far as I know, if you want to fixed the element at the bottom of the screen, please set the element position value to absolute. Also add !important.

    code:

    .image
    {;
    z-index:-1 !important;
    }
    

    Also I hope you could post all code you have done for us to test, this will better help you solve the problem.

    Best Regards,

    Eric Du

    Thursday, February 2, 2017 7:17 AM
  • User-851967432 posted

    I don't know how much this will help but here is all of the code:

    I have a Master Page that houses the menu which hides behind the WinFormsDocumentView in the content below. The bootstrap modal popups also hide behind the WinFormsDocumentView. Is there a way to just tell the browser to put everything on top the WinFormsDocumentView without a complete redesign of the page?

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPMIN.master.cs" Inherits="MasterPMIN" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <link href="Content/font-awesome.min.css" rel="stylesheet" />
        <script src="packages/jQuery.3.1.1/Content/Scripts/jquery-3.1.1.min.js"></script>
        <script src="packages/bootstrap.3.3.7/content/Scripts/bootstrap.min.js"></script>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <script src="js/UseWebServices.js"></script>
        <link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
        <script src="js/jquery.dataTables.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                function onSuccess(result, textStatus, sXMLHttpRequest) {
                    populateMenu(sXMLHttpRequest.responseText);
                }
                function onError(sXMLHttpRequest, textStatus, errorThrown) { alert("Exception occured while getting XML Data. " + errorThrown); };
                function onComplete(result, textStatus) { };
                getXML(onSuccess, onError, onComplete);
    
                $('.navbar-lower').affix({
                    offset: { top: 50 }
                });
    
                //GetQueueStatus();
            });
    
            function DisableBackSpace() {
                if (window.event.keyCode == 8) {
                    window.event.keyCode = 0;
                    event.returnValue = false;
                }
            }
    
            function populateMenu(data) {
                var ID;
                var ONCLICK;
                var TEXT;
                var htmlMenu = '';
                var MODAL = '';
          
                $(data).find('MAIN').find('MAIN_MENU_ITEM').each(function () {
                    if ($(this).find('SUB').find('SUB_MENU_ITEM').length > 0) {
                        htmlMenu += "<li class='dropdown'>";
                        htmlMenu += '<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">' + $(this).find('TEXT').first().text()
                        htmlMenu += '<span class="caret"></span></a>';
                        htmlMenu += '<ul class="dropdown-menu">';
    
                        $(this).find('SUB').find('SUB_MENU_ITEM').each(function () {
                            ID = $(this).find('ID').first().text();
                            htmlMenu += '<li id = "' + ID + '">';
                            ONCLICK = $(this).find('ONCLICK').first().text();
                            htmlMenu += '<a onclick = "' + ONCLICK + '" ' + MODAL + '>'
                            TEXT = $(this).find('TEXT').first().text();
                            htmlMenu += TEXT + "</a></li>";
                        })
                        htmlMenu += '</ul></li>'
                    }
    
                    else {
                        ID = $(this).find('ID').first().text();
                        htmlMenu += '<li id = "' + ID + '">';
                        
                        ONCLICK = $(this).find('ONCLICK').first().text();
                        MODAL = $(this).find('MODAL').first().text();
    
                        if (MODAL.length > 0) {
                            htmlMenu += '<a href="#" onclick = "' + ONCLICK + '" ' + MODAL + '>';
                        }
                        else {
                            htmlMenu += '<a href = "' + ONCLICK + '">';
                        }
                        
                        TEXT = $(this).find('TEXT').first().text();
                        htmlMenu += TEXT + "</a></li>";
                    }
                });
                $('#MenuCell').append(htmlMenu);
            }
    
            function getXML(onSuccess, onError, onComplete) {
                $.ajax({
                    type: 'GET',
                    url: 'XML/PMPROCESSING.xml',
                    dataType: 'xml',
                    success: function (data, textStatus, sXMLHttpRequest) {
                        onSuccess(data, textStatus, sXMLHttpRequest);
                    },
                    error: function (sXMLHttpRequest, textStatus, errorThrown) {
                        onError(sXMLHttpRequest, textStatus, errorThrown);
                    },
                    complete: function (sXMLHttpRequest, textStatus) {
                        onComplete(sXMLHttpRequest, textStatus);
                    }
                });
            }
            function UserKeyPressed() {
                if (window.event.keyCode == 13) {
                    if ($('#CatRoleModal').hasClass('in')) {
                        $('#btnCategoryOK').click();
                    }
                    if ($('#QueueResultModal').hasClass('in')) {
                        $('#btnResultsOK').click();
                    }
                }
            }
    
            function GetQueueStatus() {
                function onSuccess(result, textStatus, sXMLHttpRequest) {
                    ShowResult(result.responseText);
                }
                function onError(sXMLHttpRequest, textStatus, errorThrown) { alert("Exception occured while getting queue status. " + errorThrown); };
                function onComplete(result, textStatus) { };
    
                CallAjaxWebService("asmx/MWW.asmx", "wsGetWebEnvironmentConfiguration", { "ApplicationID": "SYSADM", "SessionToken": "xxx" }, onSuccess, onError, onComplete);
            }
    
            function ShowResult(result) {
                var xml = result.value[2];
                alert(xml);
                $('WORKFLOW_FILTERS', xml).each(function () {
                    var value = $(this).attr('NAME');
                    var label = $(this).attr('DESCRIPTION');
                    $('#ddlMasterQueue').append("<option value='" + value + "'>" + label + "</option>");
                });
            }
        </script>
    
        <style>
            body {
                margin-top: 50px;
            }
    
            .divide-nav {
                padding-top: 10px;
                height: 50px;
            }
    
            .divide-text {
                padding: 15px 0;
            }
    
            .affix {
                top: 50px;
                width: 100%;
            }
    
            .filler {
                min-height: 2000px;
            }
    
            .navbar-form {
                padding-left: 0;
            }
    
            .navbar.navbar-default .collapse.in {
                display: block !important;
            }
    
            .container-full {
                margin: 0 auto;
                width: 100%;
            }
    
            label {
                font-weight: normal !important;
            }
    
            .navbar {
                /*background-image: url("../images/main_nav_blue_fill.gif");  
                background-image: url("../images/main_nav_blue_rt_cap.gif");*/
                /*images/main_nav_blue_rt_cap.gif*/
            }
        </style>
        <title></title>
    
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body onkeyup="UserKeyPressed()";>
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container container-full">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">DAWPM Processing</a>
                </div>
                <div id="navbar" class="collapse navbar-collapse">
                    <ul id="MenuCell" class="nav navbar-nav">
                    </ul>
                </div>
            </div>
        </nav>
        <div class="divide-nav">
            <div class="container container-full">
                <fieldset>
                    <div class='row'>
                        <div class='col-sm-4 text-left'>
                            <div class='form-group'>
                                <form class="form-inline">
                                    <label for="ddlMasterQueue" class="control-label">Selection</label>
                                    <select class="form-control" id="ddlMasterQueue">
                                        <option value="BDD_PNDQUE">BDD Pend Queue</option>
                                        <option value="BDD_INQUE">BDD In Queue</option>
                                    </select>
                                    <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i>   Search</button>
                                    <button type="submit" class="btn btn-primary"><i class="fa fa-folder-open"></i>   Open</button>
                                    <input type="checkbox" class="custom-control-input">
                                    <button type="submit" class="btn btn-primary"><i class="fa fa-times"></i>   Close</button>
                                </form>
                            </div>
                        </div>
                        <div class='col-sm-4 text-center'>
                            <div class='form-group'>
                                <form class="form-inline">
                                    <label for="contents" class="control-label">Contents</label>
                                    <select class="form-control" id="contents">
                                        <option selected>Choose...</option>
                                        <option value="1">One</option>
                                        <option value="2">Two</option>
                                        <option value="3">Three</option>
                                    </select>
                                    <button type="button" class="btn btn-default">
                                        <span class="glyphicon glyphicon-triangle-left"></span>
                                    </button>
                                    <button type="button" class="btn btn-default">
                                        <span class="glyphicon glyphicon-triangle-right"></span>
                                    </button>
                                </form>
                            </div>
                        </div>
                        <div class='col-sm-4 text-right'>
                            <div class='form-group'>
                                <form class="form-inline">
                                    <button type="submit" class="btn btn-primary"><i class="fa fa-trash"></i>   <u>D</u>elete</button>
                                    <button type="submit" class="btn btn-primary"><i class="fa fa-reply"></i>   <u>R</u>eject</button>
                                    <button type="submit" class="btn btn-primary"><i class="fa fa-pause"></i>   <u>P</u>end</button>
                                    <button type="submit" class="btn btn-primary"><i class="fa fa-hand-paper-o"></i>   <u>H</u>old</button>
                                    <button type="submit" class="btn btn-primary"><i class="fa fa-arrow-right"></i>   <u>F</u>orward</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </fieldset>
    
            </div>
        </div>
    
    
        <asp:ContentPlaceHolder ID="body" runat="server">
        </asp:ContentPlaceHolder>
    
    </body>
    </html>
    

    Here is the content:

    <%@ Page Title="" Language="C#" AutoEventWireup="true" MasterPageFile="~/MasterPMIN.master" CodeFile="MWWPMProcessing.aspx.cs" Inherits="MWWPMProcessing" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server" onload="onPageLoad();" onunload="clearViewer();">
        <script>
            var mSessionId = '<%=Server.UrlEncode(Request.QueryString["SESSION_TOKEN"])%>';
            var mUserId = '<%=_curUserId %>';
    
            $(document).ready(function () {
            });
    
            function CategoryRolePopupData() {
                function onSuccess(data, textStatus, sXMLHttpRequest) {
                    var xml = sXMLHttpRequest.responseText;
                    $('#hdnCategoryXml').val(xml);
                    LoadCategoryDDL();
                    $('#ddlCategory').focus();
                }
    
                function onComplete(result, textStatus) {
    
                }
    
                function onError(sXMLHttpRequest, textStatus, errorThrown) {
                    alert("Exception occured while retrieving retrieving categories. " + errorThrown);
                    window.close();
                }
                if ($('#hdnCategoryXml').val().length == 0) {
                    CallAjaxWebService("asmx/PMPROCESSING.asmx", "GetCategoryRoleData", { "profileName": mUserId }, onSuccess, onError, onComplete);
                }
            }
    
            function LoadCategoryDDL() {
                var xml = $('#hdnCategoryXml').val();
                $('#ddlCategory').empty();
                $('CATEGORY', xml).each(function () {
                    var value = $(this).attr('NAME');
                    var label = $(this).attr('NAME');
                    $('#ddlCategory').append("<option value='" + value + "'>" + label + "</option>");
                });
                selCat_OnChange();
                
            }
    
            function selCat_OnChange() {
                $('#ddlRole').empty();
                var catName = $('#ddlCategory').val();
                var xml = $('#hdnCategoryXml').val();
    
                var catXML = $('CATEGORY[NAME="' + catName + '"]', xml);
                $(catXML).each(function () {
                    $('DAWPM_ROLE', this).each(function () {
                        var value = $(this).attr('XREF_ID');
                        var label = $(this).attr('NAME');
                        $('#ddlRole').append("<option value='" + value + "'>" + label + "</option>");
                    });
                });
            }
    
            function ShowQueueResults() {
                $('#CatRoleModal').modal('hide');
                $('#QueueResultModal').modal('show');
            }
    
            function GetQueueResults() {
                function onSuccess(data, textStatus, sXMLHttpRequest) {
                    var xml = sXMLHttpRequest.responseText;
                    BuildQueueTable(xml);
                }
    
                function onComplete(result, textStatus) {
                }
    
                function onError(sXMLHttpRequest, textStatus, errorThrown) {
                    alert("Exception occured while retrieving retrieving queue results. " + textStatus);
                    window.close();
                }
    
                var xmlFilter = "<FILTER><LOCATION>BDD_INQUE</LOCATION>" +
                    "<PROPERTYSET NAME=\"SEARCH_CRITERIA\">" +
                    "<PROPERTIES>" +
                    "<PROPERTY NAME=\"STATUS\">~~STATUS=0 OR (STATUS=1 AND VS_USER='SYSADM')</PROPERTY>" +
                    "<PROPERTY NAME=\"CATEGORY\">" + $('#ddlCategory option:selected').text() + "</PROPERTY>" +
                    "<PROPERTY NAME=\"DAWPM_ROLE\">" + $('#ddlRole option:selected').text() + "</PROPERTY><PROPERTY NAME=\"RANK\" SORT_ORDER=\"0\"></PROPERTY>" +
                    "</PROPERTIES>" +
                    "</PROPERTYSET><LIMIT>0</LIMIT><SKIP></SKIP></FILTER>";
                
                CallAjaxWebService("asmx/PMPROCESSING.asmx", "jqSearchWorklist", { "p_ApplicationId": "PMPROCESSING", "p_SessionToken": mSessionId, "p_Filter": xmlFilter }, onSuccess, onError, onComplete);
            }
    
            function BuildQueueTable(xml) {
                var tbl = '<table id=\'tblQueueResults\' class=\'dawpmTable\'>';
                tbl += '<thead><tr>';
                $('TITLE', xml).each(function () {
                    tbl += '<td>';
                    tbl += $(this).text();
                    tbl += '</td>';
                });
    
                tbl += '</tr></thead>';
                tbl += '<tbody>';
                
                $('RECORD', xml).each(function () {
                    tbl += '<tr rowid = ' + $(this).attr('ROWID') + '>';
                    $('FIELD', this).each(function () {
                        tbl += '<td>';
                        tbl += $(this).text();
                        tbl += '</td>';
                    });
                    tbl += '</tr>';
                });
                
                tbl += '</tbody>';
                tbl += '</table>';
                
                $('#divQResults').html(tbl);
                $('#tblQueueResults').dataTable({
                    "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                    scrollY: 550,
                    scrollX: 1000,
                });
    
                $('.dataTables_length').addClass('form-group form-inline').css({ 'padding-left': '15px' });
                $('.dataTables_filter').addClass('form-group form-inline').css({ 'padding-right': '15px' });
                $('input[type=search]').addClass('form-control');
                $('select').addClass('form-control');
                $('label').addClass('control-label');
            }
    
        </script>
        <style>
            @media (min-width: 768px) {
                .modal-xl {
                    width: 90%;
                   max-height: 95%;
                }
            }
        </style>
         <style>
            .dawpmTable {
                font-family: "Helvetica Neu", Arial, Helvetica, sans-serif;
                border-collapse: collapse;
                width: 100%;
            }
            .dawpmTable td, .dawpmTable th, .dawpmTable thead {
                border: 1px solid #ddd;
                padding: 8px;
            }
    
            .dawpmTable tr:nth-child(even) {
                background-color: #f2f2f2;
            }
    
            .dawpmTable tbody tr:hover {
                background-color: #ddd;
            }
    
            tr:not(:first-child):hover {
                background-color: #ddd;
            }
    
            .dawpmTable th, .dawpmTable thead {          
                background-color: #428bca;
                color: white;
                white-space: nowrap;
            }
            .modal.fade {
                z-index: 10000000 !important;
            }
             .modal {
                 ;
             }
             #WinFormsDocumentView {
                 ;
                 z-index: -1 !important;
             }
        </style>
    
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="body" runat="Server">
        <div class="container container-full">
            <div class="row">
                <div class="col-md-8">
                    <div class="well" style=";z-index: 9999;">
                        
                        <object id="WinFormsDocumentView" name="WinFormsDocumentView" height="100%" width="100%"
                            classid="ViewStar.Windows.Forms.DocumentView.dll#ViewStar.Windows.Forms.DocumentView" viewastext>
                            <param name="BackColor" value="DarkGray" >
                            <param name="ServiceToken" value="" >
                            <param name="ServiceUrl" value="" >
                            <param name="UserName" value="" >
                            <param name="CurrentCulture" value="">
                        </object>
                                              
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="well">
                        <div class="panel panel-primary">
                            <div class="panel-heading">Attributes</div>
                            <div class="panel-body">Panel Content</div>
                        </div>
                        <div class="panel panel-primary">
                            <div class="panel-heading">Memo</div>
                            <div class="panel-body">Panel Content</div>
                        </div>
                    </div>
    
                </div>
            </div>
        </div>
        <!-- Category/Role Modal -->
        <div class="modal fade" id="CatRoleModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header" style="background-color: #428bca; color: white;">
    
                        <button style="color: white;" type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <i class="fa fa-close"></i>
                        </button>
                        <h4 class="modal-title">Category and Role</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-horizontal">
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="selectbasic">Select Category</label>
                                    <div class="col-md-6">
                                        <select id="ddlCategory" name="selectbasic" class="form-control" onchange="selCat_OnChange();">
                                        </select>
                                    </div>
                                </div>
    
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="selectbasic">Select Role</label>
                                    <div class="col-md-6">
                                        <select id="ddlRole" name="selectbasic" class="form-control">
                                        </select>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" id="btnCategoryOK" onclick="ShowQueueResults(); GetQueueResults();"><i class="fa fa-thumbs-o-up"></i>&nbsp;Ok</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i>&nbsp;Close</button>
                    </div>
                </div>
            </div>
        </div>
    
        <!-- Queue Results Modal -->
        <div class="modal fade" id="QueueResultModal" data-backdrop="static">
            <div class="modal-dialog modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header" style="padding-bottom: 0px;">
                        <div class="container container-full">
                            <fieldset>
                                <div class='row'>
                                    <div class='col-sm-6 text-left'>
                                        <div class='form-group'>
                                            <form class="form-inline">
                                                <label for="ddlQueue" class="control-label">
                                                    <h4>Selection</h4>
                                                </label>
                                                <select class="form-control" id="ddlQueue">
                                                    <option value="BDD_PNDQUE">BDD Pend Queue</option>
                                                    <option value="BDD_INQUE">BDD In Queue</option>
                                                </select>
                                            </form>
                                        </div>
                                    </div>
                                    <div class='col-sm-6 text-right'>
                                        <div class='form-group'>
                                            <form class="form-inline">
                                                <button type="submit" class="btn btn-primary"><i class="fa fa-arrow-right"></i>&nbsp;<u>F</u>orward</button>
                                                <button type="submit" class="btn btn-primary"><i class="fa fa-gears"></i>&nbsp;<u>P</u>references</button>
                                                <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i>&nbsp;Close</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
    
                        </div>
                    </div>
                    <div class="modal-body" style="padding-bottom: 0px;">
                        <div class="form-horizontal">
                            <div class="well" id="divQResults">
                                <span>No Records to Display</span>                            
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" id="hdnCategoryXml" name="hdnCategoryXml" />
    </asp:Content>
    
    

    Thursday, February 2, 2017 2:47 PM
  • User-851967432 posted

    Another catch is that it has to be IE11 compatible and optimistically cross-browser compatible.

    Thursday, February 2, 2017 3:31 PM
  • User-474980206 posted

    adamturner34

    Another catch is that it has to be IE11 compatible and optimistically cross-browser compatible.

    in that case, you need to replace the <object> with a html/javascript solution.

    note: IE Edge will not support your object tag. to get to work with IE11 you will need to update the client registry settings:

    https://technet.microsoft.com/en-us/itpro/internet-explorer/ie11-deploy-guide/net-framework-problems-with-ie11

    Thursday, February 2, 2017 9:24 PM
  • User-851967432 posted

    I just ended up hiding and showing for now:

    $(document).ready(function () {
        $('#CatRoleModal').on('shown.bs.modal', function () {
            $('#ddlCategory').focus();
            $('#WinFormsDocumentView').hide();
        })
        $('#QueueResultModal').on('shown.bs.modal', function () {
            $('#tblQueueResults_filter input').focus();
            $('#WinFormsDocumentView').hide();
        })
    
        $('#CatRoleModal').on('hidden.bs.modal', function () {
            $('#WinFormsDocumentView').show();
        })
        $('#QueueResultModal').on('hidden.bs.modal', function () {
            $('#WinFormsDocumentView').show();
        })
    
        $('#navbar').on('click', function () {
            $('#WinFormsDocumentView').hide();
        });
    
        $(document).on('click', function () {
            if ($('#WinFormsDocumentView').css('display') == 'none')
            {
                $('#WinFormsDocumentView').show();
            }
        });
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, February 3, 2017 4:20 PM