Adaptive jquery modal window

Question

Adaptive jquery modal window

There is a window on jq, I implement it like this:

$(function () {
  $("#modal-dialog").dialog({
    autoOpen: false,
    draggable: false,
    resizable: false,
    width: 400,
    height: 400,
    show: {
        duration: 1000
    },

    hide: {
        duration: 1000
    }

  });

In html it looks like this:

<div id="modal-dialog" style="display:none; overflow: hidden;" title="Задайте вопрос и мы с вами свяжемся.">

    @using (Ajax.BeginForm("RequestLetter", new AjaxOptions { UpdateTargetId = "Id", OnSuccess = "OnSuccess()", OnFailure = "OnFail()" }))
    {
        <div class="form-horizontal">
            <div class="form-group">
                @Html.Label("E-mail", htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.Editor("Email_letter", new { htmlAttributes = new { @class = "form-control" } })
                </div>
            </div>

            <div class="form-group">
                @Html.Label("Ваше имя", htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.Editor("Name_letter", new { htmlAttributes = new { @class = "form-control" } })
                </div>
            </div>

            <div class="form-group">
                @Html.Label("Телефон", htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.Editor("Phone_letter", new { htmlAttributes = new { @class = "form-control" } })
                </div>
            </div>

            <div class="form-group">
                @Html.Label("Суть вопроса", htmlAttributes: new { @class = "control-label col-md-2" })
                <div id="clr" class="col-md-10">
                    @Html.TextArea("Descript_letter", new { @class = "form-control", rows = 5 })
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Задать вопрос" class="btn btn-default" />
                </div>
            </div>
        </div>
    }
</div>

How do I make such a window adaptive?

0

html css вёрстка asp.net адаптивная-верстка

Author: unnamed, 2017-04-01

Source

1 answers

score 1 · Accepted Answer

Inside, the layout seems to be adaptive. Put instead of

width: 400,
height: 400,

Pixels calculated based on the current screen width. Well, something like that:

var width = $(window).width() * 0.3;
var height = width;
width: width,
height: height,