Javascript 引导模式&x2B；基石.js库_Javascript_Jquery_Twitter Bootstrap 3

Javascript 引导模式&x2B；基石.js库

javascript jquery twitter-bootstrap-3

Javascript 引导模式&x2B；基石.js库,javascript,jquery,twitter-bootstrap-3,Javascript,Jquery,Twitter Bootstrap 3,我正在开发一个解决方案，它可以显示医学图像的缩略图列表。我们有一个要求，即如果用户单击缩略图，应打开引导模式，该模式使用stoneronous.js库显示图像（jpg、png或dicom）使用基石似乎非常简单。我设置了一个快速插入器以下是工作plunk的代码： <!DOCTYPE html> <html> <head> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/boots

我正在开发一个解决方案，它可以显示医学图像的缩略图列表。我们有一个要求，即如果用户单击缩略图，应打开引导模式，该模式使用stoneronous.js库显示图像（jpg、png或dicom）

使用基石似乎非常简单。我设置了一个快速插入器

以下是工作plunk的代码：

<!DOCTYPE html>
<html>

<head>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="jquery.min.js"></script>
  <script src="cornerstone.js"></script>
  <script src="exampleImageIdLoader.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      var imageId = 'example://1';
      var element = document.getElementById('dicomImage');
      cornerstone.enable(element);
      cornerstone.loadImage(imageId).then(function(image) {
        cornerstone.displayImage(element, image);
      });
    });
  </script>
</head>

<body>
  <div class="container">
    <h1>This works just fine...</h1> 
    <br>
    <div id="dicomImage" style="width:512px;height:512px;">
    </div>
  </div>
</body>

</html>

不是最干净的解决方案，但它可以工作…

嗨，我也有同样的问题。你解决了吗？

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="jquery.min.js"></script>
  <script src="cornerstone.js"></script>
  <script src="exampleImageIdLoader.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      var imageId = 'example://1';
      var element = document.getElementById('dicomImage');
      cornerstone.enable(element);
      cornerstone.loadImage(imageId).then(function(image) {
        cornerstone.displayImage(element, image);
      });
    });
  </script>
</head>

<body>
  <div class="container">
    <h1>When this modal is opened the canvas looks like it's drawn at 0px x 0px...</h1>
    <br />
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h4 class="modal-title">Modal Header</h4>
          </div>
          <div class="modal-body">
            <div id="dicomImage" style="width:512px;height:512px;"></div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

$(".modal-body").appendTO("#dicomImage);