如何在CSHTML中修改jQuery Dialog弹窗的默认宽度？

兄弟，我之前也踩过这个一模一样的坑——改了半天CSS，弹窗死活卡在300px不动，试了各种方法都没用，差点给我整emo了！后来才搞明白问题出在哪，给你分享几个亲测有效的解决办法：

• 最靠谱的方法：初始化弹窗时直接指定宽度
  jQuery UI Dialog的默认宽度本来就是300px，而且它初始化的时候会给弹窗元素加内联样式，普通CSS根本抢不过它的优先级。所以别费劲改CSS了，直接在初始化代码里写死宽度就行，示例代码如下：

  $(function() {
    // 替换成你自己的弹窗ID
    $("#custom-modal").dialog({
      width: 800, // 这里填你想要的宽度，比如800px
      modal: true,
      autoOpen: false
    });
  });
  

  我当时就是用这个方法直接搞定的，比改CSS省心多了！

• 用CSS强制覆盖（万不得已才用）
  如果你非要用CSS来改，就得提高选择器的优先级，或者用!important来强制覆盖内联样式，示例如下：

  /* 针对所有jQuery Dialog弹窗 */
  .ui-dialog.ui-widget.ui-widget-content {
    width: 800px !important;
  }
  /* 或者只针对指定ID的弹窗，优先级更高 */
  #custom-modal.ui-dialog {
    width: 800px;
  }
  

  不过尽量别用!important，除非你确定不会影响其他弹窗的样式。

• 先搞清楚你用的是哪种弹窗！
  你之前试过的方法没用，大概率是把jQuery UI Dialog和Bootstrap Modal搞混了——这俩是完全不同的组件！如果用的是Bootstrap Modal，那要改的是.modal-dialog类的宽度，比如：

  .modal-dialog {
    max-width: 800px;
  }
  

  但你说弹窗一直固定300px，基本可以确定是jQuery UI Dialog，优先用第一种方法就行。

内容来源于stack exchange