Помогите пожалуйста с модальным окном на "javascript"

Привет уважаемые форумчане, помогите пожалуйста доработать код javascript, чтобы при первом входе пользователя на сайт окно появлялось и исчезало не резко, а плавно через некоторое время. Знаю что за это отвечает функция fadeIn, но как воткнуть ее в код и чтобы все правильно заработало, ума не приложу. Заранее прошу прощение у бывалых и знатоков, но в программировании к сожалению не силен....

javascript, который нужно доработать

Код (Text):

1. <script language="javascript">
2. if (document.cookie.indexOf('_visited=1') == -1) {
3. var delay_popup = 1000;
4. setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
5. document.cookie = '_visited=1; path=/';
6. }
7. </script>

Весь рабочий код всплывающего модального окна при входе на сайт.

Код (Text):

1. <div id="parent_popup">
2. <div id="popup">
3. Тут пишем  ваш текст.
4. Или вставляем HTML код.
5. <a class="close"title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';"></a>
6. </div>
7. </div>
8.  
9. <script language="javascript">
10. if (document.cookie.indexOf('_visited=1') == -1) {
11. var delay_popup = 1000;
12. setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
13. document.cookie = '_visited=1; path=/';
14. }
15. </script>
16.  
17. <style>
18.   #parent_popup {
19.   background-color: rgba(240,240,240,.3);
20.   display: none;
21.   position: fixed;
22.   z-index: 99999;
23.   top: 0;
24.   right: 0;
25.   bottom: 0;
26.   left: 0;
27. }
28. #popup {
29.   background: #fff;
30.   width: 520px;
31.   margin: 10% auto;
32.   padding: 5px 20px 13px 20px;
33.   border: 10px solid #fff;
34.   position: relative;
35.   /*--CSS3 Тени для Блока--*/
36.   -webkit-box-shadow: 0px 0px 20px #000;
37.   -moz-box-shadow: 0px 0px 20px #000;
38.   box-shadow: 0px 0px 20px #000;
39.   /*--CSS3 Скругленные углы--*/
40.   -webkit-border-radius: 15px;
41.   -moz-border-radius: 15px;
42.    border-radius: 0px;
43. }
44. .close {
45.     background-color: rgba(0, 0, 0, 0.8);
46.     border: 2px solid #ccc;
47.     height: 5px;
48.     line-height: 24px;
49.     position: absolute;
50.     right: 0px;
51.     cursor: pointer;
52.     font-weight: bold;
53.     text-align: center;
54.     text-decoration: none;
55.     color: rgba(255, 255, 255, 0.9);
56.     font-size: 14px;
57.     text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
58.     top: 0px;
59.     width: 5px;
60.     -webkit-border-radius: 15px;
61.     -moz-border-radius: 15px;
62.     -ms-border-radius: 15px;
63.     -o-border-radius: 15px;
64.     border-radius: 0px;
65.     -moz-box-shadow: 1px 1px 3px #000;
66.     -webkit-box-shadow: 1px 1px 3px #000;
67.      box-shadow: 1px 1px 3px #000;
68. }
69. .close:hover {
70.     background-color: rgba(0, 122, 200, 0.8);
71. }
72. </style>