javascript - 如何设置 Ajax 模态框的样式

Question

我正在调用模态以进行编辑。使用以下代码，如何设置 css 样式宽度高度等？

// Open modal in AJAX callback
$("modal").dialog({
  modal: true,
  minHeight: 500,
  minWidth: 1200,
  maxWidth: 1200,
  maxHeight: 750
});
$('#manual-ajax').click(function(event) {

  event.preventDefault();
  $.get(this.href, function(html) {
    $(html).appendTo('body').modal();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.modal.js"></script>
<link rel="stylesheet" href="jquery.modal.min.css" />

<a rel="modal:open" class="btn-info btn-sm " href="{{ route('edit_deploy_time', $campaign_job->id) }}" id="manual-ajax"><i class="fa fa-cog"></i> Edit</a>

Answer 1

您必须使用 modalClass 和 blockerClass 和 closeClass 来设置 jquery-modal 的样式。

...
modalClass: "mymodal",
...

并设置样式:

<style>
    .mymodal {
        background: #ccc;
        border: solid 1px black;
    }
</style>