Hello Everyone,

I wanted to try CSS which will close dialogue box of SLDS Modal it should close modal whenever clicked outside screen(window).
 

// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

I tried above-mentioned javascript but it's not working!

Hear, is my original visualforce page code.

<div >
                <div class="demo-only modal" id="id01" style="display:none;">
                    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open modal fade">
                        <div class="slds-modal__container">
                            <header class="slds-modal__header">
                                <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse close"  onclick="document.getElementById('id01').style.display='none'" title="Close" data-dismiss="modal">
                                    <svg class="slds-button__icon slds-button__icon_large slds-icon" aria-hidden="true">
                                        <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/utility-sprite/svg/symbols.svg#close')}"></use>
                                    </svg>
                                    
                                    <span class="slds-assistive-text">Close</span>
                                </button>
                                
                                <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Survey</h2>
                            </header>
                            
                            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1" >
                                <p>Survey is used to create different analysis for organizations. These surveys can be posted as the survey link on chatter. It provides flexibility to create different types of questions like multiselect, single select and free text. It can be associated with many Risks and Rules. It is the best way to analyze things in an organization. Survey dashboard Survey reports are provided which are based on Survey, Rules and Risks those will provide more information about responses submitted by users.</p>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <p>
                                    Assessment Survey  &nbsp;&nbsp;&nbsp;&nbsp;
                                    1.What is a Survey? &nbsp;&nbsp;&nbsp;&nbsp;
                                    Survey is a way of asking group or community members what they see as the most important needs of that group or community. The results of the survey then guide future action.
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    2. How to post a Survey ?
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    When group or a community has a question which needs to be highlighted and find the answer for that a survey is being posted. Survey question is posted on chatter and the feedback is considered.
                                </p>
                            </div>
                        </div>
                    </section>
                    <div class="slds-backdrop slds-backdrop_open"></div>
                </div>
            </div>

Suggest me where and what is my mistake,

Thank-You!