Close Dynamsoft Web Twain Popup

543 views Asked by At

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

1

There are 1 answers

4
yushulx On BEST ANSWER

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>