以编程方式引导模态更改宽度

Question

我需要通过 jquery 或 vanilla javascript 以编程方式更改模式的宽度。

这是我所拥有的：

<div class="modal fade" id="modal-popup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

  <div class="modal-dialog modal-lg" role="document" id="modal_dialog">

    <div class="modal-content">

      <div class="modal-header">

                <h3 class="modal-title pull-left" id="action_title">My Title</h3>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>

      </div>

      <div class="modal-body text-center">My Body</div>

      <div class="modal-footer">

        <button type="button" class="btn btn-default" data-dismiss="modal">Close Window</button>

      </div>

    </div>

  </div>

</div>

我似乎无法使用它：

function popUpModal()

{  

   $('#modal-popup').modal('show');

   $('.modal-content').css('width','99%');  

   console.log('it is firing!');  

}

我在这里错过了什么吗？