Jquery – Mesaj kutusu örnek

1 min


0

Aşağıda paylaşmış olduğum kodlarla sizde sayfanızın içinde basit ama dikkat çeken bir mesaj kutusu oluşturabilirsiniz.

HTML Kodları


<div id="message-box">
    
<div id="header">
        Mesaj Kutusu
        <span id="close">X</span>
    </div>

    
<div id="content">
        

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis labore eius amet eaque impedit officia sapiente voluptates, asperiores magnam maxime veniam temporibus quidem voluptas possimus, dolorum vitae eligendi minus quasi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias nam deserunt aut qui laborum dignissimos, magnam consectetur quibusdam mollitia. Tempore tenetur aperiam nobis laboriosam quis sequi ab, dolorem in. Porro. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium id dolor quae dicta repudiandae quidem ducimus minima, fugiat a veritatis reprehenderit accusantium ex quo quas, tempora, molestiae, quam nemo optio. 

    </div>

</div>

jQuery Kodları

 $(function(){
           $('#header').click(function(){
               $('#content').toggle("slow");
           }) ;
            
             $('#close').click(function(){
               $('#message-box').hide("slow");
           }) ;
        });

CSS Kodları

 body{
            margin: 0;
            padding: 0;
            background-color: darkgoldenrod;
        }
        #message-box{
            background-color:brown;
            text-align: center;
            color: white;
            cursor: pointer;
        }
        #header{
            height: 25px;
            padding: 10px; 
            border-bottom: 1px solid #fff;
        }
        #content{
            height: 130px;
            padding: 10;
            display: none;
        }
        #close{
            float: right;
        }
        #close:hover{
            color: aqua;
        }

Like it? Share with your friends!

0

0 Comments

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format