Setting a Fade on Window as well as outer click close

Hello,

I am trying to implement a Fade component on to my Window Dialog component as well as make it so when the user clicks outside of the Window it closes it. Kind of like other UI Modals.

      <span className="k-icon k-i-zoom" onClick={toggleWindow}></span>

      <Fade>
      {visible &&
        <Window
          modal={true}
          onClose={toggleWindow}
          initialHeight={420} 
          initialWidth={700}
          initialLeft={300}
          initialTop={130}
        >
          {props.flag === 'bond' && 
          <Input
            name={'Search Bond'}
            label={'Search Bond'}
            onChange={searchChanged}
            className="bond-input"
          />}
          <Grid
            className="bond-grid"
            reorderable
            sortable
            data={bonds}
            rowRender={rowRender}
          >
            <GridColumn field="cusip" title="Cusip" width="98px" headerClassName="bond-header" />
            <GridColumn field="issuer_short_name" title="Name" width="200px" headerClassName="bond-header" />
            <GridColumn field="maturity" title="Maturity" width="100px" headerClassName="bond-header" />
            <GridColumn field="coupon" title="Coupon" width="80px" text="align-right" headerClassName="bond-header" />
            <GridColumn field="bbg_ticker" title="BBG Ticker" width="150px" headerClassName="bond-header" />
          </Grid>
        </Window>}