CI3结合ace-admin模板加载模态框表单异常求助

这个问题我之前在项目里也碰到过，本质是Bootstrap（Ace Admin基于它）的data-toggle="modal"属性是针对页面中已存在的模态框元素生效，当你把<a>标签的href指向控制器地址时，浏览器会优先触发a标签的默认跳转行为，完全绕过了模态框的逻辑，所以才会直接打开新页面。下面给你两种可行的解决方式：

方式一：手动AJAX加载 + 动态填充模态框 #

这是最灵活的方案，能完全控制加载流程：

1. 修改前端触发按钮的代码 #

把原来的跳转链接改成绑定点击事件的按钮，同时在页面中预留一个空的模态框容器：

<!-- 替换原来的a标签为纯按钮 -->
<button class="btn btn-sm btn-success" id="openNewModal">
  <i class="ace-icon fa fa-plus align-top"></i> New
</button>

<!-- 页面中提前放好空的模态框容器 -->
<div id="remoteModal" class="modal fade" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- AJAX返回的内容会填充到这里 -->
    </div>
  </div>
</div>

<!-- 绑定点击事件的JS -->
<script>
$(function() {
  $('#openNewModal').click(function() {
    // 发起AJAX请求到你的控制器地址
    $.ajax({
      url: '<?php echo base_url('ctl/add/'); ?>',
      type: 'GET',
      success: function(response) {
        // 把控制器返回的模态框HTML插入到容器中
        $('#remoteModal .modal-content').html(response);
        // 触发模态框显示
        $('#remoteModal').modal('show');
      },
      error: function() {
        alert('加载表单失败，请稍后重试');
      }
    });
  });
});
</script>

2. 调整控制器的输出逻辑 #

确保控制器返回的是纯模态框相关的HTML，不要包含页面的导航、页脚等多余内容。你原来的render逻辑已经设置了theme_view = 'modal'，只要你的layouts/modal布局是干净的模态框结构（没有额外的页面框架），直接保留原来的代码即可：

public function add() {
    // 准备表单需要的数据
    $data = [
        // 你的数据内容
    ];
    
    // 指定使用模态框布局
    $this->theme_view = 'modal';
    // 设置返回内容类型为HTML
    $this->output->set_content_type('text/html');
    // 渲染视图
    $this->render('parametres/utilisateurs/_new', $data);
}

方式二：保留原有a标签写法，拦截跳转行为 #

如果你想保留原来的<a>标签样式，可以通过JS拦截它的默认跳转行为，改用AJAX加载：

<!-- 保留原来的a标签，给它加一个自定义类名 -->
<a href="<?php echo base_url('ctl/add/'); ?>" role="button" class="green open-modal-btn">
  <button class="btn btn-sm btn-success" id="myBtn">
    <i class="ace-icon fa fa-plus align-top"></i> New
  </button>
</a>

<!-- 同样需要预留空的模态框容器 -->
<div id="remoteModal" class="modal fade" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content"></div>
  </div>
</div>

<script>
$(function() {
  $('.open-modal-btn').click(function(e) {
    // 阻止a标签的默认跳转行为
    e.preventDefault();
    // 获取控制器地址
    var loadUrl = $(this).attr('href');
    
    $.ajax({
      url: loadUrl,
      success: function(response) {
        $('#remoteModal .modal-content').html(response);
        $('#remoteModal').modal('show');
      }
    });
  });
});
</script>

额外注意事项 #

1. 确保你的页面已经正确加载了jQuery和Bootstrap JS（Ace Admin默认已经包含，但要注意加载顺序，jQuery要在Bootstrap之前）
2. 检查控制器返回的HTML，不要包含<html>、<body>这类顶级标签，只需要模态框的内部结构或者完整模态框代码
3. 如果你的render函数会自动添加额外的页面元素（比如侧边栏、页脚），可以直接跳过render，直接加载视图：

   $this->load->view('layouts/modal', [
       'contents' => $this->load->view('parametres/utilisateurs/_new', $data, true)
   ]);
   

内容的提问来源于stack exchange，提问作者m-mas