bootstrap模态对话框传值乱码解决方案

         最近使用bootstrap这个前端框架其中的模态对话框效果，我们知道国外的东西用在国内项目上最头疼的就是传值乱码问题，这里先介绍下模态对话框传值的介绍（不是直接访问静态html或者直接打开写在当前界面的一个层里而是打开一个后台，将所需要的值处理好再传值前台的模态对话框）.首先看下英文介绍：诸如

<a data-toggle="modal"href="remote.html"data-target="#modal">click me</a> 这样的例子,当然还需要个目的显示层。废话不多说，下面贴出笔者自己修改的模态对话框部分的代码，使用者可以自行覆盖bootstrap.js的相关模块，这里如果不商用应该不涉及版权问题。下面代码的重点是将远程url的参数分解，即以"?"划分请求正文部分和参数部分。这里url对应的对象是this.options.remote，我们只要对这个对象处理就好了，读者可以打印下这个对象，它本身只是个url字符串,我们所遇到的乱码问题也是源自此。jquery的load（）函数最全的属性设置如下"

 $("#feeds").load("feeds.php", {limit: 25}, function(){
   alert("The last 25 entries in the feed have been loaded");
 });

"（该例子引自jquery1.7.2的文档）。bootstrap源码this.options.remote && this.$element.find('.modal-body').load( this.options.remote);(为下面代码修改后的line24)似乎并没有考虑中文参数的问题，所以才出现这种情况因此我们要做的只是变更它的方法样式就可以实现中文乱码的解决方案了。另外笔者这里还解决了如果重复点击模态下拉的按钮会卡并且重复显示相同数据的问题（这里的原因是对数据进行了缓存）这里就不做介绍了。

/* MODAL CLASS DEFINITION
  * ====================== */

  var Modal = function (element, options) {
    this.options = options
    this.$element = $(element)
      .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))
    this.options.remote && this.$element.find('.modal-body').empty(); 
    var str=this.options.remote;
    var sendok=str.substr(0,str.lastIndexOf("?"));
    str=str.substr(str.lastIndexOf("?")+1,str.length);
      if(str!=""){
    var params=str.split("&");
     var sendpara="{";
     for(var i=0;i<params.length;i++){
         if(params[i]!=""){
                 var paramsd=params[i].split("=");
                 sendpara+=("""+paramsd[0]+"""+":"+"""+paramsd[1]+""")+",";
         }
     }
    }
           sendpara=sendpara.substring(0,sendpara.lastIndexOf(","))+"}";    
           sendpara= eval("("+sendpara+")");
    this.options.remote && this.$element.find('.modal-body').load(sendok,sendpara);
  }

  Modal.prototype = {

      constructor: Modal

    , toggle: function () {
//        return this[!this.isShown ? 'show' : 'hide']()
      } 

    , show: function () {
        var that = this
          , e = $.Event('show')
        this.$element.trigger(e)
        if (this.isShown || e.isDefaultPrevented()) return
        this.isShown = true
        this.escape() 
        this.backdrop(function () {
        var transition = $.support.transition && that.$element.hasClass('fade')

          if (!that.$element.parent().length) {
            that.$element.appendTo(document.body) //don't move modals dom position
          }
          that.$element.show()
          if (transition) {
            that.$element[0].offsetWidth // force reflow
          }
          that.$element
            .addClass('in')
            .attr('aria-hidden', false)
          that.enforceFocus()
          transition ?
            that.$element.one($.support.transition.end, function () { that.$element.focus().trigger('shown') }) :
            that.$element.focus().trigger('shown')

        })
      }

    , hide: function (e) {
        e && e.preventDefault()

        var that = this

        e = $.Event('hide')

        this.$element.trigger(e)

        if (!this.isShown || e.isDefaultPrevented()) return

        this.isShown = false

        this.escape()

        $(document).off('focusin.modal')

        this.$element
          .removeClass('in')
          .attr('aria-hidden', true)
        $.support.transition && this.$element.hasClass('fade') ?
          this.hideWithTransition() :
          this.hideModal()
         $(".showall").each(function(index) { 
             $(this).remove();
             })
      }

    , enforceFocus: function () {
        var that = this
        $(document).on('focusin.modal', function (e) {
          if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
            that.$element.focus()
          }
        })
      }

    , escape: function () {
        var that = this
        if (this.isShown && this.options.keyboard) {
          this.$element.on('keyup.dismiss.modal', function ( e ) {
            e.which == 27 && that.hide()
          })
        } else if (!this.isShown) {
          this.$element.off('keyup.dismiss.modal')
        }
      }

    , hideWithTransition: function () {
        var that = this
          , timeout = setTimeout(function () {
              that.$element.off($.support.transition.end)
              that.hideModal()
            }, 500)

        this.$element.one($.support.transition.end, function () {
          clearTimeout(timeout)
          that.hideModal()
        })
      }

    , hideModal: function () {
        var that = this
        this.$element.hide()
        this.backdrop(function () {
          that.removeBackdrop()
          that.$element.trigger('hidden')
        })
      }

    , removeBackdrop: function () {
        this.$backdrop && this.$backdrop.remove()
        this.$backdrop = null
      }

    , backdrop: function (callback) {
        var that = this
          , 
          animate = this.$element.hasClass('fade') ? 'fade' : ''
        if (this.isShown && this.options.backdrop) {
          var doAnimate = $.support.transition && animate
            $(".showall").each(function(index) { 
             $(this).remove();
             })
          this.$backdrop = $('<div class="modal-backdrop ' + animate + ' showall " />')
            .appendTo(document.body)
          this.$backdrop.click(
          )
          if (doAnimate) this.$backdrop[0].offsetWidth // force reflow

          this.$backdrop.addClass('in')
          if (!callback) return
          doAnimate ?
            this.$backdrop.one($.support.transition.end, callback) :
            callback()

        } else if (!this.isShown && this.$backdrop) {
          this.$backdrop.removeClass('in')

          $.support.transition && this.$element.hasClass('fade')?
            this.$backdrop.one($.support.transition.end, callback) :
            callback()

        } else if (callback) {
          callback()
        }
      }
  }

当然这只是一部分，剩下的靠读者自己研究。至于url转化为this.options.remote对象的相关代码如下

  $(document).on('click.modal.data-api', '[data-toggle="modal"]', function (e) {
    var $this = $(this)
      , href = $this.attr('href')
      , $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^s]+$)/, ''))) //strip for ie7
      , option = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data())

    e.preventDefault()

    $target
      .modal(option)
      .one('hide', function () {
        $this.focus()
      })
  })

}(window.jQuery);

这段代码在bs的1037行（- -这里是我的行数，我是直接在它的bs上改的，你的应该再往上一点点)顺便说下！function（$）{}(window.jQuery)这种写法是一种匿名函数的写法具体可以参见http://www.jb51.net/article/21948.htm；然后大家看这代码的第一行就是定义点击带有[data-toggle]=‘modal’]这样的参数的组件响应函数，第二行是将传递的当前对象封装为jquey，第三行是获得当前的超链接内容然后看第五行是设置参数option ，这里判断$target.data('modal')的值最初为undefined所以要用扩展的方式增加，扩展的第一个参数又使用了正则判断得到的href是不是#,不是则传递href的值也就能得到我们的url,剩下的就是拿到这个url后先以？分离utl正文和参数，然后将参数封装为json字符创，网上给出的用封装好的js对象将字符串处理为json貌似不对于是自己写，具体内容相信了解简单字符串处理的读者能看懂，不了解的就需要自己补补了。其实这样处理仅仅是为了兼容ie的效果，想ff这类的浏览器是不用做任何处理就可以使用bs的，天杀的ie你究竟要折磨多少开发者才满意。