0
Ich habe ein Modal, das die volle Breite und Höhe eines Browsers nimmt. Im modalen gibt es ein Bild innerhalb eines div und einige andere Elemente, jetzt bin ich versuchen, das Bild im Vollbildmodus im Browser so zu machen, wie ein Youtube-Video im Vollbildmodus funktioniert, habe ich eine Schaltfläche hinzugefügt und Vollbild-API darin für den Zweck implementiert, aber es funktioniert nicht.Kann nicht ein Bildelement Vollbild in einem Vollbildmodus
$('#myModal').on('shown.bs.modal', function() {
$('#myInput').focus();
});
$('#dicomModal').on('shown.bs.modal', function() {
$('#myInput').focus();
});
$(document).ready(function() {
$(".js-example-basic-single").select2();
});
$(function() {
$('#datetimepicker8').datetimepicker({
});
});
$(function() {
$('#datetimepicker1').datetimepicker({
});
});
var myImage = document.getElementById('myImage');
var dicomFull = document.getElementById('dicomFull');
if (dicomFull) {
dicomFull.addEventListener('click', function() {
if (myImage.requestFullscreen) {
myImage.requestFullscreen();
} else if (myImage.webkitRequestFullscreen) {
myImage.webkitRequestFullscreen();
} else if (myImage.mozRequestFullScreen) {
myImage.mozRequestFullScreen();
} else if (myImage.msRequestFullscreen) {
myImage.msRequestFullscreen();
}
});
}.dicomv {
&__mods {
overflow: hidden !important;
}
&__items {
display: inline-block;
margin-right: 1rem;
}
&__navbar {
width: 100%;
border-radius: 0;
min-height: 60px;
margin: 0;
top: 0;
position: fixed;
z-index: 80;
}
&__next {
padding: 1rem;
margin-top: 1rem;
color: map-deep-get($colors, "background", "base");
background-color: map-deep-get($colors, "background", "bg-col");
&: hover {
color: map-deep-get($colors, "background", "base");
background-color: map-deep-get($colors, "background", "bg-col");
}
&:focus {
color: map-deep-get($colors, "background", "base");
background-color: map-deep-get($colors, "background", "bg-col");
}
}
&__fs {
padding: 1rem;
margin-top: 1rem;
color: map-deep-get($colors, "background", "base");
background-color: map-deep-get($colors, "button", "btn-col");
&: hover {
color: map-deep-get($colors, "background", "base");
background-color: map-deep-get($colors, "button", "btn-col");
}
&:focus {
color: map-deep-get($colors, "background", "base");
background-color: map-deep-get($colors, "button", "btn-col");
}
}
&__container {
position: relative;
height: 100vh;
margin: 0;
float: left;
}
&__button {
position: absolute;
left: 0;
top: 50%;
z-index: 1;
margin-top: -3.5rem;
color: map-deep-get($colors, "background", "base");
}
&__wid {
width: 100% !important;
margin-bottom: 0 !important;
@media (min-width: 768px) {
margin: 0 auto !important;
}
}
&__mod {
&--d {
top: 0 !important;
@media (min-width: 768px) {
margin: 0 auto !important;
}
}
}
}
#viewArea {
margin-left: 0px;
max-width: 100%;
background: map-deep-get($colors, "font", "para")
}
.viewport {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: absolute
}
.imageViewer {
height: 100%;
}
.viewportWrapper {
width: 100%;
height: 100%;
position: relative;
color: white;
display: inline-block;
background-color: black;
}
.viewer {
width: 100%;
height: 100%;
}
.dicom-sidebar-container {
width: 240px;
height: 100vh;
border-right: 1px solid #a1a1a1;
float: left;
overflow-y: auto;
}
.dicom-main-container-with-sidebar {
width: calc(100% - 240px);
}
.dicom-main-container-without-sidebar {
width: 100%;
}
//
.dicom-sidebar {
/*margin: 0;*/
}
.panel-heading {
padding: 2px 8px;
}
.panel-container {
margin-left: 1rem;
border: 1px solid #ccc;
}
.dicom-sidebar-panel {
margin-bottom: 0;
border: none;
border-radius: 0;
overflow-y: auto;
-webkit-box-shadow: none;
box-shadow: none;
}
.dicom-sidebar-panel-body {
padding: 0 10px 100px 10px;
overflow-y: auto;
}
.dicom-sidebar-row {
margin-right: 0;
}
.dicom-sidebar-drawer {
margin-left: -240px;
}
.dicom-sidebar-inner-box {
width: 110px;
padding-left: 3px;
margin: 1rem 0;
z-index: 100;
float: left;
}
.dicom-sidebar-inner-box:nth-child(even) {
padding-left: 6px;
}
:-webkit-full-screen {
width: 100%;
height: 100%;
}
:-moz-full-screen {
width: 100%;
height: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="dialog" class="modal dicomv__mods" id="dicomModal" style="z-index: 1050; display:">
<div class="modal-dialog modal-lg dicomv__wid">
<div class="modal-content"></div>
<div id="" class="dicomv">
<div class="navbar navbar-default dicomv__navbar">
<div class="dicom-navbar-container">
<ul class="">
<li class="dicomv__items">
<a href="#">
<button type="button" class="btn btn-default dicomv__fs" id="dicomFull" name="button">View FullScreen</button>
</a>
</li>
</ul>
</div>
</div>
<div id="viewArea" class="row">
<div id="dicom_loadbar"></div>
<div class="dicom-sidebar-container panel panel-default dicom-sidebar-panel">
<div class="panel-heading">
</div>
<div class="panel-body dicom-sidebar-panel-body">
</div>
</div>
<div class="dicomv__container dicom-main-container dicom-main-container-with-sidebar" id="myImage">
<div id="myImage">
<img src="http://images.newseveryday.com/data/thumbs/full/27419/570/0/0/0/macbook-pro.jpg" id="" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Das erste, was zu tun wäre, um Ihre Frage drastisch zu vereinfachen. Pare alles, um die grundlegendsten Teile zu sein. Dies wird a) es anderen erleichtern, zu sehen, was die wichtigen Teile sind, und b) es leichter machen zu sehen, was das Problem ist (es würde keinen externen Code geben, der in dem Problem keinen Einfluss hat). – Whothehellisthat