如何使用bootstrap或jquery在单击按钮时将局部视图显示为弹出窗口/模式?

迷宫

我意识到这可能是重复性的问题,但是我找不到答案,因此提出了一个新问题。我是Web开发的新手,并努力尝试完成这一琐碎的工作:我想在用户单击按钮时向用户显示一些信息。该信息应像弹出窗口一样显示:仅当用户单击X右上方的close()或ok底部的按钮时,该信息才会关闭我尝试使用各种方式获得不同的答案来实现此目标,但似乎没有任何效果。以下显示静态模态的代码段:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<div class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>One fine body&hellip;</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

但是我无法将其转换为显示我的局部视图。如何显示实际上包含部分视图的相似模态?

麦坎

您的按钮引用了一个按钮,用于切换模式的显示/隐藏data-target="#myModal",但是您的模式没有ID。

尚不清楚您是否希望整个模态是部分内容,还是只是内部内容。没关系,因为这都是在服务器端应用的,而您的模式是在客户端处理的。

实际上,引导程序已经支持动态加载“部分”(在后面的代码中使用jQuery加载):

<button class="btn btn-primary" href="myFile.html" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>

上面的方法比下面的示例要简单得多。

阅读有关jQuery load()get()的更多信息

var myData = '<div class="modal-dialog">' +
  '<div class="modal-content">' +
  '<div class="modal-header">' +
  '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>' +
  '</button>' +
  '<h4 class="modal-title">Modal title</h4>' +
  '</div>' +
  '<div class="modal-body">' +
  '<p>Load on request</p>' +
  '</div>' +
  '<div class="modal-footer">' +
  '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
  '<button type="button" class="btn btn-primary">Save changes</button>' +
  '</div>' +
  '</div>' +
  '</div>';

//myData could be a file, with the same contents, and then you would use the ".load()" method below instead
$('#myModal').on('show.bs.modal', function(e) {
  //$('#myModal').load('myFile.cshtml'); //When loading from a file/url
  $('#myModal').html(myData); //loading from a string
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

<div class="modal" id="myModal">

</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在单击按钮时将部分视图呈现为模式弹出窗口?

来自分类Dev

如何根据单击按钮显示不同的模式弹出窗口

来自分类Dev

单击“ Asp按钮”控件时显示Bootstrap模态弹出窗口

来自分类Dev

单击HTML中的按钮时如何显示弹出窗口

来自分类Dev

单击按钮时未显示弹出窗口

来自分类Dev

如何将Ajax响应显示为模式弹出窗口

来自分类Dev

如何将Ajax响应显示为模式弹出窗口

来自分类Dev

如何使用jQuery显示隐藏和显示模式弹出窗口

来自分类Dev

如果使用jQuery单击按钮,如何激活弹出模式?

来自分类Dev

MailChimp-单击按钮时显示模式注册表单弹出窗口

来自分类Dev

如果提交按钮单击模式弹出窗口在显示中间打开?

来自分类Dev

如何使用 jQuery 在单击时创建选项列表弹出窗口

来自分类Dev

在单击按钮时不显示Bootstrap模式

来自分类Dev

单击复选框并单击“还原”按钮时如何打开“ jQuery对话框”弹出窗口

来自分类Dev

当用户单击链接jqgrid时显示模式弹出窗口

来自分类Dev

单击按钮时不显示ajax弹出窗口

来自分类Dev

单击按钮时不显示ajax弹出窗口

来自分类Dev

单击时显示弹出窗口

来自分类Dev

单击嵌套在循环中的按钮时如何弹出显示模式

来自分类Dev

颤振:将照片或图像显示为模式弹出窗口

来自分类Dev

单击按钮时使用局部视图更新DIV(动态)

来自分类Dev

在内部单击时,Bootstrap弹出窗口将关闭

来自分类Dev

如何在单击按钮时显示视图?

来自分类Dev

使用Angular2单击添加按钮时,如何隐藏主体中的删除按钮并在下一个添加弹出窗口中显示它

来自分类Dev

如何将Toast通知弹出窗口显示为模式对话框?

来自分类Dev

当仅单击html中的按钮时,如何关闭弹出窗口

来自分类Dev

如何在助手方法中为将显示集合的视图构建引导程序弹出窗口

来自分类Dev

仅在按“取消”按钮时如何关闭模式弹出窗口?

来自分类Dev

使用 Jquery/Javascript 通知弹出窗口单击链接时无法显示值

Related 相关文章

  1. 1

    如何在单击按钮时将部分视图呈现为模式弹出窗口?

  2. 2

    如何根据单击按钮显示不同的模式弹出窗口

  3. 3

    单击“ Asp按钮”控件时显示Bootstrap模态弹出窗口

  4. 4

    单击HTML中的按钮时如何显示弹出窗口

  5. 5

    单击按钮时未显示弹出窗口

  6. 6

    如何将Ajax响应显示为模式弹出窗口

  7. 7

    如何将Ajax响应显示为模式弹出窗口

  8. 8

    如何使用jQuery显示隐藏和显示模式弹出窗口

  9. 9

    如果使用jQuery单击按钮,如何激活弹出模式?

  10. 10

    MailChimp-单击按钮时显示模式注册表单弹出窗口

  11. 11

    如果提交按钮单击模式弹出窗口在显示中间打开?

  12. 12

    如何使用 jQuery 在单击时创建选项列表弹出窗口

  13. 13

    在单击按钮时不显示Bootstrap模式

  14. 14

    单击复选框并单击“还原”按钮时如何打开“ jQuery对话框”弹出窗口

  15. 15

    当用户单击链接jqgrid时显示模式弹出窗口

  16. 16

    单击按钮时不显示ajax弹出窗口

  17. 17

    单击按钮时不显示ajax弹出窗口

  18. 18

    单击时显示弹出窗口

  19. 19

    单击嵌套在循环中的按钮时如何弹出显示模式

  20. 20

    颤振:将照片或图像显示为模式弹出窗口

  21. 21

    单击按钮时使用局部视图更新DIV(动态)

  22. 22

    在内部单击时,Bootstrap弹出窗口将关闭

  23. 23

    如何在单击按钮时显示视图?

  24. 24

    使用Angular2单击添加按钮时,如何隐藏主体中的删除按钮并在下一个添加弹出窗口中显示它

  25. 25

    如何将Toast通知弹出窗口显示为模式对话框?

  26. 26

    当仅单击html中的按钮时,如何关闭弹出窗口

  27. 27

    如何在助手方法中为将显示集合的视图构建引导程序弹出窗口

  28. 28

    仅在按“取消”按钮时如何关闭模式弹出窗口?

  29. 29

    使用 Jquery/Javascript 通知弹出窗口单击链接时无法显示值

热门标签

归档