如何在容器外部也单击以关闭此搜索栏？

Question

我在网站顶部内置了一个搜索栏，该搜索栏在单击mag glass图标时打开。我已经通过网上找到的js通过反复试验来打开它，也可以通过单击搜索栏显示中包含的X来关闭它。但是，我似乎无法弄清楚的是，当用户还单击整个搜索容器之外的任何位置（称为＃jas-header）时，如何关闭它。

以下是我所拥有的屏幕截图。实际的网站是joriebreonn.com-它是实时的。

整个搜索栏的顶部都包含在＃jas-header中。

因此，我已经找到并尝试将其合并到js中，但是还没有运气，我确实具有编写js的最低能力，但是有时我很幸运，一点点的工作对我来说确实有用。我尝试过变种，但没有运气：

X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.3, random_state=0)

sm = SMOTE(random_state=2)
X_res, y_res = sm.fit_sample(X_train, y_train.ravel())

cl = RandomForestClassifier() 
params = {  
'n_estimators': [100, 300, 500, 800, 1000],
'criterion': ['gini', 'entropy'],
'bootstrap': [True, False],
'max_features': ['auto', 'sqrt', 'log2'],
'max_depth' : [4,5,6,7,8],

和

clf = GridSearchCV(estimator=cl, param_grid=params, cv=5, verbose=0)
bestmodel= clf.fit(X_res, y_res)
cl = RandomForestClassifier(bootstrap=False, criterion='gini', 
max_depth=8, max_features='sqrt', n_estimators= 300) 
forestSMOTE= cl.fit(X_res, y_res)

feature_importances = pd.DataFrame(forestSMOTE.feature_importances_,
                               index = X_res.columns, columns=
                               ['importance']).sort_values('importance', 
                                                           ascending=False)

成功驱动盒子打开和关闭（X为.sf-close）的js如下：

      window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

我只是无法成功添加它，也无法通过单击搜索栏之外的任何位置使其恢复默认设置（图像1）！

我试图在Codepen中重现所有内容，但是我什至无法让正在运行的代码在笔中工作，所以我真的很茫然。道歉对于您中的大多数人来说可能是一个非常简单的问题，但对我而言，这似乎是不可能的！任何帮助将不胜感激。

非常感谢Jorie。 ：）