1

I am using this code to create a message on the top of a drawing canvas and it works fine but sometimes the user scroll the screen and deform the drawing page

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Modal message</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="http://sktcho.com/wp-includes/qp2qp-sktcho/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#dialog-message" ).dialog({
      modal: true,



      buttons: {
        Ok: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  } );
  </script>
</head>
<body>

<div id="dialog-message" title="Quick tutorial">
<div id="dialog" title="Basic dialog">


<p> <center><font size="4" color="black">use two fingers to draw and one finger to move the screen</font></center></p>
<p> <center><font size="4" +/- to zoom in & out</font></center></p>
  <p><img border="0" src="http://sktcho.com/wp-includes/qp2qp-sktcho/giphy.gif"></p>
</div>


</body>
</html>

What can i do to prevent scrolling and if i can't how to make the canvas page scroll back to what it was

طارق بك محمود
  • 307
  • 2
  • 13
  • I'm missing some of your code, i.e. the actual drawing canvas and the part where you set the class of your to .modal-open (which you have in your CSS). Please update your question. (Temp. Fiddle here: https://jsfiddle.net/6kcwtqov/ ) – Laurens Swart Mar 26 '17 at 09:52
  • Thank you for your help..the html file of the canvas is http://www.sktcho.com/wp-includes/qp2qp-sktcho/index.html – طارق بك محمود Mar 26 '17 at 10:55

1 Answers1

0

If you want to stop the user from scrolling when he dialog is opened, you can change your dialog code as below.

$( function() {
    $( "#dialog-message" ).dialog({
      modal: true,
      "allowScrolling": false,
      buttons: {
        Ok: function() {
          $( this ).dialog( "close" );
        }
      }
    });
} );

Check this answer, if you want other options.

Community
  • 1
  • 1
bpjoshi
  • 1,091
  • 16
  • 23