CODEWITHSUNDEEP
jqueryjquery-ui
orpqK
orpqK

Reputation: 2785

Add a close button on a div

How can I add a close button on on top of gray box after I click the button the first time? After clicking the folder-open button, the gray area comes up, I want to add a button with the icon {primary: "ui-icon-close"}, from jquery UI http://www.petefreitag.com/cheatsheets/jqueryui-icons/

After clicking this x button, I want $("#1").html(<div class="normal"><div>); so the box is back to green again.

This is my fiddle http://jsfiddle.net/3HauW/205/

Upvotes: 0

Views: 98

Answers (1)

Sam Battat
Sam Battat

Reputation: 5745

There is a better way to do what you want, but here is working example of your existing way of doing that.

http://jsfiddle.net/3HauW/217/

changes that I made:

var newHtml ='<div class="button_wrap ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button" aria-disabled="false" title=""><span class="ui-button-icon-primary ui-icon ui-icon-close"></span><span class="ui-button-text"></span></div>';
    newHtml +="Blah Blah Blah";

AND HERE...

$(function(){   
    $('#1 .button_wrap').on('click', function(e){
        e.stopPropagation();
        $(".info").html(newHtml).show();

});});

AND ADDED THIS

$(function(){
    $("#1").on("click", ".info .ui-icon-close", function(){
        $(".info").hide();
    });
});

AND THIS TO CSS

.info{
    top: 0;
    width: 12.5em;
    background-color:#cfcfcf;
    overflow-y: auto;
    display:block;
    height:200px;
    z-index:19;
    color:black; 
    word-wrap:break-word;
    position: absolute;
    display: none;
}

Upvotes: 1

Related Questions