JavaScript Jquery-popup is to wide at mobiles

[jjdk]

Hi.
I have a contact form that I have made responsive.
But I have problem with a Jquery-popup, when it's shown at mobiles. It's to wide because width is set to 800px.

Is it possible to set the width according to the width of the device.

My javascript code:

$( document ).ready(function() {
        $(".formaal").change(function(){
            update_formaal();
        });
        $(".formaal").keyup(function(){
            update_formaal();
        });
        $( "#dialog" ).dialog({
            autoOpen: false,
            width: 800,
            buttons: {
            "Ok": function() {
              $( this ).dialog( "close" );
            }
          }
        });
        $( "#formaal_text" ).click(function() {
        $( "#dialog" ).dialog( "open" );
        });
    });

 

[vishvajitd]

Yes, it is possible to set the width of the popup according to the width of the device. You can use JavaScript to get the width of the viewport and use that value to set the width of the popup. Here's an updated version of your code:

javascript

$( document ).ready(function() {
  $(".formaal").change(function(){
    update_formaal();
  });
  $(".formaal").keyup(function(){
    update_formaal();
  });
  $( "#dialog" ).dialog({
    autoOpen: false,
    width: $(window).width() * 0.8,
    buttons: {
      "Ok": function() {
        $( this ).dialog( "close" );
      }
    }
  });
  $( "#formaal_text" ).click(function() {
    $( "#dialog" ).dialog( "open" );
  });
});

 

[jjdk]

That's perfect.
Thank you so much

Is it also possible to set a max. width:

if (width of viewport > 2000 )
then
width: 2000,
else
width: $(window).width() * 0.8,

 

[jjdk]

I think I got it:

    $( document ).ready(function() {
      $(".formaal").change(function(){
        update_formaal();
      });
      $(".formaal").keyup(function(){
        update_formaal();
      });
      
      var wi = $(window).width();
      if (wi > 2000) {
      $( "#dialog" ).dialog({
        autoOpen: false,
        width: 2000,
        buttons: {
          "Ok": function() {
            $( this ).dialog( "close" );
          }
        }
      });
      }
      else {
      $( "#dialog" ).dialog({
        autoOpen: false,
        width: $(window).width() * 0.95,
        buttons: {
          "Ok": function() {
            $( this ).dialog( "close" );
          }
        }
      });
          
      }
      
      $( "#formaal_text" ).click(function() {
        $( "#dialog" ).dialog( "open" );
      });
    });