Сброс ДИВ в исходное положение после щелчка

Question

У меня есть это приложение, которое показывает маленькие окна после того, как нажатие кнопки 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> \t 
 
\t \t \t \t <div class="modules" id="module1" draggable="true"> 
 
\t \t \t \t \t <img src="http://www.touronline.ag/Portals/0/Products/alle_module.jpg" alt=""/> 
 
\t \t \t \t \t <div class="modules_box"> 
 
\t \t \t \t \t <h5>DANE:</h5> 
 
\t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t <li>Parametr 1: 500</li> 
 
\t \t \t \t \t \t \t <li>Parametr 2: 700</li> 
 
\t \t \t \t \t \t \t <li>Parametr 3: 1500 cm</li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div>

Окно перетаскиваемое, так что пользователь может перемещать их. То, что я хочу достичь, - это сбросить положение окна после того, как оно скрыто, поэтому оно всегда отображается по своему происхождению. Я бы хотел, чтобы универсальное решение не требовало написания отдельного кода для каждого окна. В абсолютном положении будет много окон, расположенных в разных местах. Какие-либо предложения о том, как это можно достичь?

Answer 1

Сброс атрибута «стиль» при переключении гарантирует, что модуль всегда возвращается к исходной позиции в таблице стилей.

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

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