如何在BootStrap模态框中消失后确保播放中的视频也停止播放

目前的项目需要在模态框中播放视频,但是按ESC键后,希望模态框消失,视频也停止播放。但一直无果。

首先想的是用jquery捕捉键盘事件,判断是ESC键之后,暂停播放,然后关闭模态框。
但这一想法,由于被BootStrap封装而失败。
于是想,能不能拦截BootStrap对ESC键的封装。
首先考虑,停止BootStrap自动按ESC退出的功能,于是尝试以下代码
  1. $("#myModal").modal({keyboard:false});
但这一代码使用后,对键盘事件完全无感。
于是就考虑,通过代码拦截,结果发现下面这篇文章。恍然大悟。
于是将暂停播放的代码放在关闭后的on事件的处理代码中,于是OK。
以下是原文的内容
  •  下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。
    事件 描述 实例
    show.bs.modal 在调用 show 方法后触发。
    $('#identifier').on('show.bs.modal', function () {// 执行一些动作...})
    shown.bs.modal 当模态框对用户可见时触发(将等待 CSS 过渡效果完成)。
    $('#identifier').on('shown.bs.modal', function () {// 执行一些动作...})
    hide.bs.modal 当调用 hide 实例方法时触发。
    $('#identifier').on('hide.bs.modal', function () {// 执行一些动作...})
    hidden.bs.modal 当模态框完全对用户隐藏时触发。
    $('#identifier').on('hidden.bs.modal', function () {// 执行一些动作...})

    实例

    下面的实例演示了事件的用法:

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.    <title>Bootstrap 实例 - 模态框(Modal)插件事件</title>
    5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    6.    <script src="/scripts/jquery.min.js"></script>
    7.    <script src="/bootstrap/js/bootstrap.min.js"></script>
    8. </head>
    9. <body>
    10.  
    11. <h2>模态框(Modal)插件事件</h2>
    12.  
    13. <!-- 按钮触发模态框 -->
    14. <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    15.    开始演示模态框
    16. </button>
    17.  
    18. <!-- 模态框(Modal) -->
    19. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
    20.    aria-labelledby="myModalLabel" aria-hidden="true">
    21.    <div class="modal-dialog">
    22.       <div class="modal-content">
    23.          <div class="modal-header">
    24.             <button type="button" class="close" data-dismiss="modal" 
    25.                aria-hidden="true">×
    26.             </button>
    27.             <h4 class="modal-title" id="myModalLabel">
    28.                模态框(Modal)标题
    29.             </h4>
    30.          </div>
    31.          <div class="modal-body">
    32.             点击关闭按钮检查事件功能。
    33.          </div>
    34.          <div class="modal-footer">
    35.             <button type="button" class="btn btn-default" 
    36.                data-dismiss="modal">
    37.                关闭
    38.             </button>
    39.             <button type="button" class="btn btn-primary">
    40.                提交更改
    41.             </button>
    42.          </div>
    43.       </div><!-- /.modal-content -->
    44.    </div><!-- /.modal-dialog -->
    45. </div><!-- /.modal -->
    46. <script>
    47.    $(function () { $('#myModal').modal('hide')})});
    48. </script>
    49. <script>
    50.    $(function () { $('#myModal').on('hide.bs.modal', function () {
    51.       alert('嘿,我听说您喜欢模态框...');})
    52.    });
    53. </script>
    54.  
    55. </body>
    56. </html>

js解码base64中文乱码问题

编码过程肯定是没有问题的,看到前面加颜色那段字了没,就是我解出来的编码虽然是utf8,但是将中文文字进行Base64编码再解码后,重新排列编码的时候,往往就会出现乱码,UTF8页面的编码实际还是用UTF-16存储的。应该在解码后把UTF8还原为UTF-16格式。这样就能真正搞定 javascript解密中文base64编码的问题了。

附件列表

 

utf-8编码引起js输出中文乱码的解决办法

如果web application的编码规则是utf-8,如网页头中的:
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

那么js文件中如果有中文输出就会出现乱码,解决此个问题可在引用javascript输出的地方加上charset=”gb2312″ 或 charset=”big5″(假设输出的是Big5繁体字)。

例:
<script type=”text/javascript” language=”javascript” src=”scripts/output.js” charset=”gb2312″></script>

PS:另一种解决方法是把js文件保存为utf-8编码。

博主点评:晕,这么简单的方法,原来我一直想有没有什么办法能够把Javascript的结果由GB2312转到UTF-8,找到了PHP的mb_convert_encoding,但由于不会把Javascript的输出结果指定为字符串从而一筹莫展,没想到居然有这么简单的办法。看来凡事都要多用两个角度想想。

转载自http://www.cnblogs.com/zgqys1980/archive/2007/11/13/957653.html