Question

在我的网站上，我有一个用HTML打开模态窗口的链接，这很好用，当我尝试将其更改为PHP链接并向链接添加变量时，代码模式窗口无法打开。

这是我的代码。

PHP

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

HTML

<div id="accSettings1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">

JQUERY

  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').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 && 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()
  }

, 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 (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 && this.options.backdrop) {
      var doAnimate = $.support.transition && animate

      this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
        .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 && this.$backdrop) {
      this.$backdrop.removeClass('in')

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

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

所以，如果我删除

  ?ip_address='.$ip_address.'

模态框工作正常，是否有另外一种方法可以发送变量？

Answer 1

我认为您不能对class="btn"等HTML属性使用单引号;尝试使用双引号并在必要时转义引号。

Answer 2

散列应该在参数

之后

href="?ip_address='.$ip_address.'#accSettings1"

Answer 3

我只是将初始引号更改为单引号，因此HTML可以保留为双引号。

 echo '<a href="#accSettings1?ip_address=' . $ip_address . '" class="btn btn-small btn-primary hidden-tablet hidden-phone" data-toggle="modal" data-original-title="add">Add</a>';

编辑：删除花括号

使用PHP链接打开JQuery模式

3 个答案: