• WebUiDicomMetadataDialogJS - web UI dialog that allows to display metadata of DICOM image. Dialog occurs when "Show DICOM File Metadata" button is clicked.
• WebUiCustomDicomVoiLutDialogJS - web UI dialog that allows to display metadata of DICOM image. Dialog occurs when "DICOM Window Level" button is clicked.

1. "Standard" dialogs, which are based on Bootstrap

Ready-to-use "standard" dialogs, which are based on Bootstrap, are stored in Vintasoft.Imaging.Dicom.Dialogs.Bootstrap.js file.
If "standard" Bootstrap dialogs must be used in web DICOM viewer, web application must have:

• link to the CSS-file of Bootstrap, for example:
  
  • HTML

  <link rel="stylesheet" type="text/css" href="~/lib/bootstrap/dist/css/bootstrap.css">
  

• link to the jQuery and Bootstrap libraries, for example:
  
  • HTML

  <script src="~/lib/jquery/dist/jquery.min.js" type="text/javascript"></script>
  <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
  

• link to the Vintasoft.Imaging.js, Vintasoft.Imaging.Dicom.js, Vintasoft.Imaging.Dialogs.Bootstrap.js and Vintasoft.Imaging.Dicom.Dialogs.Bootstrap.js files, for example:
  
  • HTML

  <script src="~/js/Vintasoft.Imaging.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.css">
  <script src="~/js/Vintasoft.Imaging.DocumentViewer.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.DocumentViewer.css">
  <script src="~/js/Vintasoft.Imaging.Dialogs.Bootstrap.js" type="text/javascript"></script>
  <script src="~/js/Vintasoft.Imaging.DocumentViewer.Dialogs.Bootstrap.js" type="text/javascript"></script>
  

Dialog appearance can be customized using Bootstrap CSS.

Here is screenshot of "standard" "DICOM file metadata" dialog, which is based on Bootstrap:

2. "Standard" dialogs, which are based on jQuery UI

Ready-to-use "standard" dialogs, which are based on jQuery UI, are stored in Vintasoft.Imaging.Dicom.Dialogs.jQueryUI.js file.
If "standard" jQueryUI dialogs must be used in web DICOM viewer, web application must have:

• link to the CSS-file of jQuery UI, for example:
  
  • HTML

  <link rel="stylesheet" type="text/css" href="~/js/jquery-ui-css/jquery-ui.min.css">
  

• link to the jQuery and jQuery UI libraries, for example:
  
  • HTML

  <script src="~/js/jquery-3.3.1.min.js" type="text/javascript"></script>
  <script src="~/js/jquery-ui.min.js" type="text/javascript"></script>
  

• link to the Vintasoft.Imaging.js, Vintasoft.Imaging.Dicom.js, Vintasoft.Imaging.Dialogs.jQueryUI.js and Vintasoft.Imaging.Dicom.Dialogs.jQueryUI.js files, for example:
  
  • HTML

  <script src="~/js/Vintasoft.Imaging.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.css">
  <script src="~/js/Vintasoft.Imaging.DocumentViewer.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.DocumentViewer.css">
  <script src="~/js/Vintasoft.Imaging.Dialogs.jQueryUI.js" type="text/javascript"></script>
  <script src="~/js/Vintasoft.Imaging.DocumentViewer.Dialogs.jQueryUI.js" type="text/javascript"></script>
  

Dialog appearance can be customized using jQuery UI CSS.

Here is screenshot of "standard" "DICOM file metadata" dialog, which is based on jQuery UI:

3. Custom "standard" dialogs

If ready-to-use "standard" Bootstrap and jQuery UI dialogs are not suitable for your UI or task, it is possible to use custom "standard" dialogs in web DICOM viewer.

If it is necessary to create custom dialog for another UI library, it is recommended to create dialog as a wrapper around ready-to-use UI panel (WebUiDicomMetadataPanelJS, WebUiCustomDicomVoiLutPanelJS). In this case it is not necessary to implement logic, which is related with dialog (for example, print images) because panel already contains all necessary logic.

Also it is possible to create "custom" dialog from scratch but in this case it is necessary to implement dialog UI and logic.