【问题标题】:Bootstrap modal not appearing, despite all files included and HTML appearing correct尽管包含所有文件且 HTML 显示正确,但引导模式未出现
【发布时间】:2016-02-11 16:15:37
【问题描述】:

这可能看起来重复,但我看到的所有其他答案都与错误包含脚本或错误分配 data-* 值有关。

我有一个非常简单的引导模式(今天早上更新了 3.3.6 版),我这辈子都无法出现! 在 MVC5 中工作,我有一个标准视图,我希望引导模式出现在数据表中的按钮上。为了排除数据表本身,我把这个按钮拿出来,然后把它贴在页面上。

按钮如下所示:

<a href="#" class="btn btn-primary edit-modal" data-target="#modal-container" data-trigger="modal">Edit</a>

我按顺序包括 jQuery v2.1.4(分钟)和引导程序 3.3.6(分钟):

我从 Bootstrap 示例站点获取了一个库存模态 HTML sn-p,并对其进行了细微的更改:

<div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="model-close-btn" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Edit</h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>

(我已经从输出 HTML 中获取了这两个 HTML sn-ps,而不是 .cshtml,以防它们在出路时被 MVC / JS 摆弄)

我看不出这个配置有什么问题,但无论我尝试了什么,我都无法显示模式。

onload 或 onclick 没有控制台错误,并且页面呈现隐藏模式(所以我假设 BS 正在执行某些操作!)

jQuery 和 Bootstrap 的所有其他用法、样式和代码都可以正常工作,除了这一点。

我尝试过的事情:

  • 更新 BS 和 jQuery
  • 移动模态 html(就在正文结束之前,就在正文开始之后,中间随机!)
  • 删除data-*标签并将点击绑定到按钮
  • 更改模态的 ID

我现在没有想法,没有错误,我想调试的也没有太多。

任何需要调查的想法甚至是模糊的领域都会非常有帮助。

【问题讨论】:

  • 你能做一个小提琴来显示你的问题吗?
  • Jquery modal 对我来说从来没有这样工作过,我总是必须在从 javaScript 单击按钮时执行 modal.show()。
  • @sapy 我确实想到了这个,尝试了点击句柄,但也没有任何乐趣
  • $('#buttonId').click(function(){$('#myModal').modal('show')}) 会工作。

标签: jquery twitter-bootstrap bootstrap-modal


【解决方案1】:

你可以通过将 data-trigger="modal" 替换为 data-toggle="modal"

来更改锚标记吗
<a href="#" class="btn btn-primary edit-modal" data-target="#modal-container" data-toggle="modal">Edit</a>

【讨论】:

    【解决方案2】:

    试试这个

    <a href="#" class="btn btn-primary edit-modal" data-target="#modal-container" data-toggle="modal">Edit</a>
    

    【讨论】:

      【解决方案3】:

      尝试 href="javascript:void(0)" 可能是认为您需要进行远程加载或用按钮替换标签

      【讨论】:

      • 我忘了补充说,a href 代替了我最初替换的按钮,以防出现问题
      猜你喜欢
      • 2019-01-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-11-07
      • 2014-04-25
      • 1970-01-01
      • 2021-03-15
      相关资源
      最近更新 更多