单击后将div重置为其原始位置

Question

I have this application that shows small windows after clicking a button JsFiddle

 $('.modules').draggable(); $('.glyphicon').click(function() { $(this).next('.modules').slideToggle(); }); 

 .glyphicon { font-size: 2em; color: #A70000; position:absolute; z-index: 10; display: block; } .glyphicon:hover { cursor: pointer; color: #000; } .modules{ position: absolute; width: 30%; box-shadow: 5px 5px 15px #000; z-index: 5; display: none; overflow: hidden; } .modules_box { color: white; background-color: rgba(159,159,159,0.8) } .module img{ padding: 5px; } #module1 { left: 10%; top: 7%; } #button_module1 { left: 10%; top: 7%; } 

 <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <span id="button_module1" class="glyphicon glyphicon-info-sign"></span> <div class="modules" id="module1" draggable="true"> <img src="http://www.touronline.ag/Portals/0/Products/alle_module.jpg" alt=""/> <div class="modules_box"> <h5>DANE:</h5> <ul> <li>Parametr 1: 500</li> <li>Parametr 2: 700</li> <li>Parametr 3: 1500 cm</li> </ul> </div> </div> 

Windows are draggable so a user can move them around. What I want to achieve is to reset the window position after it's hidden so it always shows at its origin. I would like the universal solution that doesn't require writing separate code for every window. There will be many windows placed at different spots using absolute position. Any suggestions how this could be achieved?

Answer 1

Resetting the 'style' attribute on toggle will ensure the module always reverts to it's original position in the stylesheet.

if(!$this.is(":visible")){
    $this.attr('style','');
}

http://jsfiddle.net/vrww6fcm/3/