How to close popup


Tags: jquery,html,css

Problem :

how t close that bio-info popup please help me how to implemented in above the code.

in html file

 <ul class="ch-grid">
  <li>
<div class="bioinfo">
 <h2>tooltips</h2>
/div>

in css file

.bioinfo {
    display: none;
    max-height: auto;
    max-width: 220px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: rgba(108,108,108, 0.5) 5px 5px 5px;
    border: 2px solid #ccc;
    position: absolute;
    top: 150px;
    right: -150px;
    z-index: 100;
/*    background: #eeeded; f6f6f6*/
    background: rgba(246,246,246, 0.8);
    font-size: 10px;
    padding: 15px 3px 3px 3px;
    text-align: justify;
}

In Jquery

$('.ch-grid > li').hover(function() {
        //$('.ch-item').click(function() {

            //alert('ddl');
            //$(this).css({position: 'relative', left: -200});
            $(this).css({position: 'relative', marginRight: 120});
            $(this).children('.bioinfo').show();
}, function() {
    $($(this).data('.bioinfo')).hide();
});

how t close that bio-info popup please help me how to implemented in above the code.



Solution :

Try This

$('.instance > li').hover(function() {
    $(this).css({position: 'relative', marginRight: 120});
    $(this).children('.bioinfo').show();
}, function() {
    $(this).children('.bioinfo').hide();
});

    CSS Howto..

    How to centralise a button div

    CSS - How to center a div relative to a background image positioned as cover

    How to change default message “Please enter a value with a valid mimetype.” for HTML file input

    how to select the first element of each class with css

    How to force a div to honor its constraints and put things into overflow instead of resizing a column?

    How to make a div fade on hover?

    CSS: How to make a nav menu with a sub nav menu directly below it?

    How do I correct this CSS fluid layout glitch?

    How can I force IE to keep some margin at left in it's browser window?

    How do I go about targeting the literal “first-child” of a div, styling depending on element type

    How to only have margin between child and not with parent in CSS?

    How to apply alternate background color for each column in CSS columns

    How to make a transparent border using CSS?

    How to make the newly appended html code keep the original css style?

    How to display CSS files in Django blog?

    How do i prevent my CSS affecting external plugins?

    How can I change Bootstrap table-striped in a less specific way?

    How to create an ActionImage from a CSS Sprite

    How to put gradient on top of background image but below text

    How to avoid a vertical dropdown menu to add the vertical scrollbar when at bottom?

    How to draw a centered line with a rectangle to one side in CSS

    How to skip first N elements with CSS or jQuery?

    How to stretch vertical scroll?

    How do I handle the hover in this recursive menu using jQuery?

    how to style php file with css + 1 more than one element

    How to display results comming from database in 3 columns using php/mysql/html/css

    How * tag can be used in CSS?

    How to disable Bootstrap 3 collapse nav menu css

    How to insert javascript function in css link tag

    how to avoid from loading unnecessary javascript and css in page on codeigniter to improve the load time [closed]