在旋转木马内的模态，以阻止在模态打开时旋转木马的移动。
在旋转木马内的模态，以阻止在模态打开时旋转木马的移动。
提问于 2018-05-20 13:57:00
现在我正在尝试设置某种证明性的小部件。
我有一个旋转木马，里面有大量的文字，还有一个打开模态的链接。当我打开模态，我希望旋转木马停止循环的过程中，模态是开放的。
到目前为止，我已经尝试了引导文档中的pause和interval选项。以及试图通过添加/更改数据属性interval="false"来阻止旋转木马。
实例：https://codepen.io/anon/pen/QrYNQM
<div class="row">
<div class="col-4">
<!-- WIDGET -->
<aside class="card widget-card widget-feedback">
<header class="card-header">
<h4 class="h5 m-0 card-heading"><span class="text-primary">Deine</span> Meinung zählt</h4>
<div class="carousel-controls">
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Vor</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Zurück</span>
</a>
</div><!-- /.carousel-controls -->
</header><!-- /.card-header -->
<div class="card-body">
<ul class="nav nav-pills" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-feedback-latest-tab" data-toggle="pill" href="#pills-feedback-latest" role="tab" aria-controls="pills-feedback-latest" aria-selected="true"><span class="fas fa-clock pr-2"></span>Neueste</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-feedback-add-new-tab" data-toggle="pill" href="#pills-feedback-add-new" role="tab" aria-controls="pills-feedback-add-new" aria-selected="false"><span class="fas fa-plus-circle pr-2"></span>Feedback abgeben</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-feedback-latest" role="tabpanel" aria-labelledby="pills-feedback-latest-tab">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-12">
<div class="tm-h mb-0 p-2 hero">
<p class="mb-0 pt-2 pr-2 pb-0 pl-2"><span class="fas fa-quote-left pr-2 text-primary"></span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum <a class="open-modal-stop-carousel" href="#" data-toggle="modal" data-target="#feedback-expanded-id">[...]</a><span class="fas fa-quote-right pl-2 text-primary"></span></p>
</div>
</div>
<div class="col-12">
<div class="tm-f p-2">
<div class="row my-2 mx-1">
<div class="col-4 d-flex align-items-center">
<div class="">
<img src="http://placeimg.com/70/70/people" class="img-fluid -circle border border-default" alt="" />
</div>
</div>
<div class="col-8">
<span><span class="fab fa-facebook pr-1"></span>Gabriella Luisa Wagner <small>vor 12 Tagen</small></span>
<ul class="mb-0 list-inline list-unstyled">
<li class="list-inline-item m-0" style="font-size: small">
<span class="fas fa-star pr-2"></span><span class="fas fa-star pr-2"></span><span class="fas fa-star pr-2"></span><span class="fas fa-star pr-2"></span><span class="fas fa-star-half pr-2"></span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-12">
<div class="tm-h mb-0 p-2 hero">
<p class="mb-0 pt-2 pr-2 pb-0 pl-2"><span class="fas fa-quote-left pr-2 text-primary"></span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a class="open-modal-stop-carousel" href="#" data-toggle="modal" data-target="#feedback-expanded-id">[...]</a><span class="fas fa-quote-right pl-2 text-primary"></span></p>
</div>
</div>
<div class="col-12">
<div class="tm-f p-2">
<div class="row my-2 mx-1">
<div class="col-4 d-flex align-items-center">
<div class="">
<img src="http://placeimg.com/70/70/people" class="img-fluid -circle border border-default" alt="" />
</div>
</div>
<div class="col-8">
<span><span class="fab fa-facebook pr-1"></span>Gabriella Luisa Wagner <small>vor 12 Tagen</small></span>
<ul class="mb-0 list-inline list-unstyled">
<li class="list-inline-item m-0" style="font-size: small">
<span class="fas fa-star pr-2"></span><span class="fas fa-star pr-2"></span><span class="fas fa-star pr-2"></span><span class="fas fa-star pr-2"></span><span class="fas fa-star-half pr-2"></span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-feedback-add-new" role="tabpanel" aria-labelledby="pills-feedback-add-new-tab">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="custom-control custom-checkbox my-1 mr-sm-2">
<input type="checkbox" class="custom-control-input" id="customControlInline">
<label class="custom-control-label" for="customControlInline">Remember my preference</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div><!-- /. card-body -->
</aside><!-- /. xxx -->
<!-- END WIDGET -->
<!-- Modal -->
<div class="modal fade" id="feedback-expanded-id" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Feedback von Gabriella Luisa Wagner</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12">
<div class="tm-h mb-0 p-2 hero">
<p class="mb-0 pt-2 pr-2 pb-0 pl-2"><span class="fas fa-quote-left pr-2 text-primary"></span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="fas fa-quote-right pl-2 text-primary"></span></p>
</div>
</div>
<div class="col-12">
<div class="tm-f p-2">
<div class="row my-2 mx-1">
<div class="col-4 d-flex align-items-center">
<div class="">
<img src="http://placeimg.com/70/70/people" class="img-fluid -circle border border-default" alt="" />
</div>
</div>
<div class="col-8">
<span><span class="fab fa-facebook pr-1"></span>Gabriella Luisa Wagner <small class="d-block">vor 12 Tagen</small></span>
<ul class="mb-0 list-inline list-unstyled">
<li class="list-inline-item m-0" style="font-size: small">
<span class="fas fa-star pr-2"></span><span class="fas fa-star pr-2"></span><span class="fas fa-star pr-2"></span><span class="fas fa-star pr-2"></span><span class="fas fa-star-half pr-2"></span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">schließen</button>
</div>
</div>
</div>
</div>
</div>
</div> JS调度一号
$(function () {
$('.open-modal-stop-carousel').on('click', function(){
$('#carouselExampleControls').data('interval', "false");
});
});JS调度二号
$(function () {
$('.open-modal-stop-carousel').on('click', function(){
$('#carouselExampleControls').carousel({
pause: true,
inverval: false
});
});
});我的记录都没有阻止旋转木马骑自行车。我不知道我错过了什么来阻止它。向正确的方向推进是值得赞赏的。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-20 19:09:46
使用shown.bs.modal，和hidden.bs.modal，以及旋转木马方法 pause和cycle
如下所示：
$(function () {
$('#feedback-expanded-id').on('shown.bs.modal', function () {
$('#carouselExampleControls').carousel('pause');
});
$('#feedback-expanded-id').on('hidden.bs.modal', function () {
$('#carouselExampleControls').carousel('cycle');
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50435566
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号