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>	
				<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是可拖动的，因此用户可以移动它们。我想要实现的是在隐藏后重置窗口位置，使其始终显示在其原点。我想要通用的解决方案，不需要为每个窗口编写单独的代码。使用绝对位置将在不同的位置放置许多窗口。有关如何实现这一目标的任何建议吗？

Answer 1

在切换时重置'style'属性将确保模块始终恢复到样式表中的原始位置。

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

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

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

1 个答案: