Open a JQuery modal with PHP link
<p>On my website i have a link to open a modal window in HTML and this works fine,  when i try and change this to a PHP link and add a variable to the link the code modal window doesn't open.</p>

<p>Here is my code.</p>

<p>PHP</p>

<pre><code> echo "&lt;a href=\"#accSettings1?ip_address={$ip_address}\" class='btn btn-small btn-primary hidden-tablet hidden-phone' data-toggle='modal' data-original-title='add'&gt;Add&lt;/a&gt;"; 
</code></pre>

<p>HTML</p>

<pre><code>&lt;div id="accSettings1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true"&gt;
</code></pre>

<p>JQUERY</p>

<pre><code>  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 &amp;&amp; this.$element.find('.modal-body').load(this.options.remote)
}

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 &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; this.$element.hasClass('fade') ?
      this.hideWithTransition() :
      this.hideModal()
  }

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

, escape: function () {
    var that = this
    if (this.isShown &amp;&amp; this.options.keyboard) {
      this.$element.on('keyup.dismiss.modal', function ( e ) {
        e.which == 27 &amp;&amp; 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 (that) {
    this.$element
      .hide()
      .trigger('hidden')

    this.backdrop()
  }

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

, backdrop: function (callback) {
    var that = this
      , animate = this.$element.hasClass('fade') ? 'fade' : ''

    if (this.isShown &amp;&amp; this.options.backdrop) {
      var doAnimate = $.support.transition &amp;&amp; animate

      this.$backdrop = $('&lt;div class="modal-backdrop ' + animate + '" /&gt;')
        .appendTo(document.body)

      this.$backdrop.click(
        this.options.backdrop == 'static' ?
          $.proxy(this.$element[0].focus, this.$element[0])
        : $.proxy(this.hide, this)
      )

      if (doAnimate) this.$backdrop[0].offsetWidth // force reflow

      this.$backdrop.addClass('in')

      doAnimate ?
        this.$backdrop.one($.support.transition.end, callback) :
        callback()

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

      $.support.transition &amp;&amp; this.$element.hasClass('fade')?
        this.$backdrop.one($.support.transition.end, $.proxy(this.removeBackdrop, this)) :
        this.removeBackdrop()

    } else if (callback) {
      callback()
    }
  }
} 
</code></pre>

<p>So if i remove the </p>

<pre><code>  ?ip_address='.$ip_address.'
</code></pre>

<p>the modal box works fine, is there another way in which i can send the variable?</p>
