我刚从网站代码中用bootstrap 4尝试了modal
<div class="container">
<h1>Play YouTube or Vimeo Videos in Bootstrap 4 Modal</h1>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary video-btn" data-toggle="modal" data-src="https://www.youtube.com/embed/Jfrjeg26Cwk" data-target="#myModal">
Play Video 1
</button>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary video-btn" data-toggle="modal" data-src="https://www.youtube.com/embed/IP7uGKgJL8U" data-target="#myModal">
Play Video 2
</button>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary video-btn" data-toggle="modal" data-src="https://www.youtube.com/embed/A-twOC3W558" data-target="#myModal">
Play Video 3
</button>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary video-btn" data-toggle="modal" data-src="https://player.vimeo.com/video/58385453?badge=0" data-target="#myModal">
Play Vimeo Video
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="" id="video" allowscriptaccess="always">></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
css代码:
body {margin:2rem;}
.modal-dialog {
max-width: 800px;
margin: 30px auto;
}
.modal-body {
position:relative;
padding:0px;
}
.close {
position:absolute;
right:-30px;
top:0;
z-index:999;
font-size:2rem;
font-weight: normal;
color:#fff;
opacity:1;
}
$(document).ready(function() {
// Gets the video src from the data-src on each button
var $videoSrc;
$('.video-btn').click(function() {
$videoSrc = $(this).data( "src" );
});
console.log($videoSrc);
// when the modal is opened autoplay it
$('#myModal').on('shown.bs.modal', function (e) {
// set the video src to autoplay and not to show related video. Youtube related video is like a box of chocolates... you never know what you're gonna get
$("#video").attr('src',$videoSrc + "?rel=0&showinfo=0&modestbranding=1&autoplay=1" );
})
// stop playing the youtube video when I close the modal
$('#myModal').on('hide.bs.modal', function (e) {
// a poor man's stop video
$("#video").attr('src',$videoSrc);
})
// document ready
});
Bootstrap 4也依赖于popper.js,所以如果不包含它,就无法使用Bootstrap 4 https://cdnjs.com/libraries/popper.js
我有一个Meteor React应用程序,我正在开发该应用程序,我想在其中以一种模式实现登录/注册功能。我不知道如何通过单击“注册”或“登录”按钮打开模式 我有以下两个组成部分: UI/组件/main-布局/头/LoggedOutNav.jsx UI/组件/模态/LoginRegistration.jsx 如何从其他组件打开模态?
这让我快发疯了。 我只想有一个按钮来显示和隐藏Bootstrap4中的DIV,每当我切换class=“collapse”时,DIV会显示但不会折叠。 在页面加载div折叠,按钮只工作一次,看着开发者视图在Chrome每当点击按钮它从折叠切换到collapse.show?再次单击它,它每次都会填充collapse.show。 JQuery在标题中。 感谢任何帮助,这让我发疯。在多个设备/浏览器上测试
我需要能够使用或类似函数打开Twitter引导模式窗口。只需要代码就可以进入。我正在尝试创建一个可单击的来打开模式。 代码摘录: 分区代码: 模态分区代码: JavaScript:
我想在引导模式中显示图表。代码在这里:但它不工作,图表不显示。如何解决这个问题? #button type=“button”class=“btn btn primary btn lg active”数据切换=“modal”数据目标=“#myModel”
问题内容: <%= image_tag "Background.jpg" %> 我如何使上述代码全屏显示Twitter Bootstrap模态弹出窗口,我尝试使用CSS,但无法按照我想要的方式获得它。任何人都可以帮我。 问题答案: 我在Bootstrap 3中使用以下代码实现了这一目标: 通常,如果您对间距/填充问题有疑问,请尝试右键单击(或在Mac上按cmd键单击),然后在Chrome上选择“检
我需要将元素添加到我的引导模式中,这样每次打开它时,我都可以看到一些来自我的本地存储的数据,这是我到目前为止所拥有的。我正在尝试添加fn元素 JS: 下面是模态的HTML代码