Funcoes JS

Tenho que criar uma função que irá retornar uma caixa de mensagem no centro da tela com as informações dada pelo usuário, porém, tal caixa de mensagem tem quer ser feita usando a tag div e, é ai que está morando o problema. Abaixo está o código que estou tentando implementar.

<html>
<head>
    <script>
        function showMessage (msg) {
            msg = prompt ('Digita Mensagem' );          
            $(document).ready(function() {
                $("#div1").fadeIn(300).delay(3000).fadeOut(300);
            });         
        }       
    </script>

<style>
    #div1 {
        background-color: #90EE90;
        border-style: hidden;
        border-color: #98FB98;
        position: absolute;
        left: 700px;
        top: 400px;
    }
</style>
</head>

<body>
    <div id = "div1">

    </div>
</body>
</html>

Voce está usando jquery sem referenciar o js da biblioteca. Exemplo:

<html>
<head>
  	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        function showMessage() {
            var msg = prompt ('Digita Mensagem');
            $("#div1").text(msg);
            $("#div1").fadeIn(300).delay(3000).fadeOut(300);
        }
    </script>
</head>

<body>
  <div id="div1"></div>  
  <button onclick="showMessage()">Teste</button>
</body>
</html>
1 curtida