纯javascript模式不显示

Question

我正在尝试在我的项目中使用此Codepen。我复制了html，css，javascript：

alexs-mbp:ads-php-test adasilva$ ls -l
total 72
-rw-r--r--@ 1 adasilva  staff   490 Sep 14 23:00 README.txt
-rw-r--r--@ 1 adasilva  staff   990 Sep 14 19:09 checklogin.php
-rw-r--r--@ 1 adasilva  staff     2 Sep 14 23:00 composer.json
drwxr-xr-x@ 3 adasilva  staff   102 Sep 14 19:01 images
drwxr-xr-x  3 adasilva  staff   102 Sep 14 19:14 includes
-rw-r--r--@ 1 adasilva  staff   709 Sep 14 23:00 index.php
drwxr-xr-x  2 adasilva  staff    68 Sep 15 17:41 lib
-rw-r--r--@ 1 adasilva  staff   261 Sep 14 19:09 loginsuccess.php
-rw-r--r--@ 1 adasilva  staff    88 Sep 14 19:11 logout.php
-rw-r--r--@ 1 adasilva  staff   809 Sep 14 19:08 main_login.php
-rw-r--r--@ 1 adasilva  staff   193 Sep 14 23:00 manifest.yml
-rw-r--r--@ 1 adasilva  staff  1157 Sep 14 23:00 style.css
alexs-mbp:ads-php-test adasilva$ 

不幸的是，当我点击“显示对话框”按钮时没有任何反应。

Answer 1

您需要将javascript代码包装在window.onload中以确保DOM已准备就绪，然后按如下方式操作：

window.onload = function(){
    var dialog = document.getElementById('window');
    document.getElementById('show').onclick = function() {
        dialog.show();
    };
    document.getElementById('exit').onclick = function() {
        dialog.close();
    };
};