By default the Web PDF Document Editor uses the following "standard" dialogs:

• WebUiDocumentPasswordDialogJS - web UI dialog that allows to set the password of document. Dialog occurs when secured document is loading.
• WebUiUploadImageFromUrlDialogJS - web UI dialog that allows to enter URL of the image/document file to be opened in web document viewer. Dialog occurs when "Open file from URL" button is clicked.
• WebUiPrintImagesSettingsPanelJS - web UI dialog that allows to print images, which are shown in image viewer. Dialog occurs when "Print images" button is clicked.
• WebImageViewerSettingsDialogJS - web UI dialog that allows to view and edit the image viewer settings. Dialog occurs when "Image viewer settings" button is clicked.
• WebThumbnailViewerSettingsDialogJS - web UI dialog that allows to view and edit the thumbnail viewer settings. Dialog occurs when "Thumbnail viewer settings" button is clicked.
• WebImageSelectionDialogJS - web UI dialog that allows to select images, which are shown in image viewer. Dialog occurs when "Mark full pages for redaction" button is clicked.
• WebPdfRedactionMarkAppearanceDialogJS - web UI dialog that allows to view and edit the PDF redaction mark appearance. Dialog occurs when "PDF redaction mark appearance" button is clicked.
• WebUiPdfRedactionMarkSettingsDialogJS - web UI dialog that allows to view and edit the PDF redaction mark settings. Dialog occurs when "PDF redaction mark appearance" button is clicked.
• WebUiPdfImageResourceDialogJS - web UI dialog that allows to view information about a PDF image-resource. Dialog occurs when "Show content image" button in "Extract images" side panel is clicked.
• WebUiPdfAConversionAndValidationDialogJS - web UI dialog that allows to to convert a PDF document to a PDF/A format or verify PDF document for conformance to PDF/A format. Dialog occurs when "PDF/A conversion and validation" button is clicked.
• WebPdfDocumentCompressorDialogJS - web UI dialog that allows to compress a PDF document. Dialog occurs when "PDF compressor" 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.Pdf.Dialogs.Bootstrap.js file.
If "standard" Bootstrap dialogs must be used in web PDF document editor, 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.css, Vintasoft.Imaging.Pdf.js, Vintasoft.Imaging.Pdf.css, Vintasoft.Imaging.Dialogs.Bootstrap.js and Vintasoft.Imaging.Pdf.Dialogs.Bootstrap.js files, for example:
  
  • HTML

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

Dialog appearance can be customized using Bootstrap CSS.

Here is screenshot of "standard" "Password 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.Pdf.Dialogs.jQueryUI.js file.
If "standard" jQueryUI dialogs must be used in web PDF document editor, 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.css, Vintasoft.Imaging.Pdf.js, Vintasoft.Imaging.Pdf.css, Vintasoft.Imaging.Dialogs.jQueryUI.js and Vintasoft.Imaging.Pdf.Dialogs.jQueryUI.js files, for example:
  
  • HTML

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

Dialog appearance can be customized using jQuery UI CSS.

Here is screenshot of "standard" "Password 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 PDF document editor.

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 (WebUiDocumentPasswordPanelJS, WebUiUploadImageFromUrlDialogJS, WebUiPrintImagesSettingsPanelJS, WebUiImageViewerSettingsPanelJS, WebUiThumbnailViewerSettingsPanelJS, WebUiImageSelectionPanelJS, WebUiPdfRedactionMarkAppearancePanelJS, WebUiPdfRedactionMarkSettingsDialogJS, WebUiPdfImageResourceDialogJS, WebUiPdfAConversionAndValidationDialogJS, WebPdfDocumentCompressorDialogJS). 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.