2

I am trying to implement Dynamsoft Web Twain in my Angular project. But there is no close button in the installation popup. How to add close button in the popup?

My Angular version is 13.3 Dynamsoft Webtwain version: 17.2.4 Screenshot of popup

C J
  • 23
  • 4

1 Answers1

1

There are three ways to add the close button in dynamsoft.webtwain.install.js:

  • Change the value of closeButton to true in _this.DWT.ShowMessage(ObjString.join(''), { width: promptDlgWidth, headerStyle: 1, closeButton: true });. By default, it is false.

  • Add a button element based on current code.

    For example, add

    ObjString.push('<div><a id="dwt-btn-close" 
onclick="Dynamsoft.onClose()"><div class="dynamsoft-dwt-dlg- 
button">Close</div></a></div>');

    below

    ObjString.push(' onclick="Dynamsoft.DCP_DWT_onclickInstallButton()"> 
<div class="dynamsoft-dwt-dlg-button">Download</div></a></div>');

    Then add the button click function

    Dynamsoft.onClose = function() {
  document.getElementsByClassName('dynamsoft-dialog') 
[0].style.display = 'none';
}

    above

    Dynamsoft.DCP_DWT_onclickInstallButton = function ()

    Now the popup window looks as follows:

    enter image description here

    You can click the close button to close the dialog. Due to z-index, the HTML elements under the popup dialog are not selectable. A tricky way is to modify z-index after hiding the popup dialog:

    let divs = document.getElementsByTagName('div');
  for (let i = 0; i < divs.length; i++) {
    divs[i].style.zIndex = -1;
  }

  • Do not call _this.DWT.ShowMessage(ObjString.join(''), { width: promptDlgWidth, headerStyle: 1, closeButton: true });. Instead, use jQuery to create a custom dialog. For example:

    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"> 
</script>
<script>
$( function() {
  $( "#dialog" ).dialog();
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying 
information. The dialog window can be moved, resized and closed with 
the &apos;x&apos; icon.</p>
</div>
</body>
</html>
yushulx
  • 11,695
  • 8
  • 37
  • 64
  • Thanks @yushulx. Able to close the dialog now. But not able to select any fields after closing popup. While Inspecting the page, class is shown as 'dynamsoft-backdrop'. So even though dynamsoft dialog box is closed, I guess the style class is still present there that of dynamsoft. How to resolve this issue? – C J Mar 22 '22 at 06:21
  • @CJ you are right. It's caused by `z-index`. If you do not want to add a custom button, you just need to change the bool value of the `closeButton` in `_this.DWT.ShowMessage(ObjString.join(''), { width: promptDlgWidth, headerStyle: 1, closeButton: true });` – yushulx Mar 22 '22 at 06:57
  • Is it possible to include this functionality without changing dynamsoft.webtwain.install.js ? – C J Mar 24 '22 at 13:45
  • @CJ You can override the function by re-declaring it in your html page. – yushulx Mar 25 '22 at 00:49