javascript - 模态类不适用于按钮

Question

我有这个表格。

<form action="../massmail.php" method="post">
    <label>Periode:</label>
    <div class="form-inline"><input class="form-inline input-small" name="maand" type="text" placeholder="bijv.: juni" /> 
         <input class="input-mini" name="jaar" type="text" value="2015" />
    </div>
    <br /> <label>Inleidende tekst:</label>
    <div>
        <textarea name="inleiding" rows="5"></textarea>
    </div>
    <br /> <label>url van de nieuwsbrief:</label>
    <div>
        <input class="input-xxlarge" name="link" type="url" value="" />
    </div>
    <div class="form-actions">
        <button class="btn btn-primary" type="submit">Verzenden</button>
        <button class="btn" formaction="../voorbeeld.php" formmethod="get" type="submit">Voorbeeld</button> 
        <a href="index.php"> <button class="btn" type="button">Annuleren</button> </a></div>
</form>

在最后<div>是表单控件。第二个按钮是我想要改变的。它提交表单，覆盖默认表单操作，并预览如果按下实际提交按钮 (Verzenden) 将发送的内容。

一切正常，但我想在模态窗口(弹出窗口)中提供此预览。由于某种原因，模态类仅适用于 <a>元素。我之前通过设置 <a> 解决了这个问题元素类到 btn modal ，但在这种情况下，我需要 formaction所以我需要一个实际的按钮。

我尝试过的事情和结果。

<button class="btn modal" formaction="../voorbeeld.php" formmethod="get" type="submit" rel="{handler: 'iframe', size: {x: 920, y: 530}}">Voorbeeld</button> 

结果:表单 get 按我预期的方式处理，但没有弹出窗口，结果只显示为好像打开了指向 php 页面的链接。

<a class="modal" href="voorbeeld.php" rel="{handler: 'iframe', size: {x: 920, y: 530}}"> <button class="btn" type="button" formaction="../voorbeeld.php" formmethod="get" type="submit">Voorbeeld MOD</button> </a>

结果:这将打开带有 php 页面的弹出窗口，但表单的结果不会传递到 php 页面。

作为片段包含的是 modal.css，它似乎没有任何内容 <a>或 <button>具体的。 modal.js 是 javascript，但我不太熟悉它。

我在 Joomla 的自定义 html 模块中完成所有这些工作! 3.4.3.

任何帮助将不胜感激

/*
		MIT-style license
 @author		Harald Kirschner <mail [at] digitarald.de>
 @author		Rouven Weßling <me [at] rouvenwessling.de>
 @copyright	Author
*/
var SqueezeBox = {
  presets: {
    onOpen: function() {},
    onClose: function() {},
    onUpdate: function() {},
    onResize: function() {},
    onMove: function() {},
    onShow: function() {},
    onHide: function() {},
    size: {
      x: 600,
      y: 450
    },
    sizeLoading: {
      x: 200,
      y: 150
    },
    marginInner: {
      x: 20,
      y: 20
    },
    marginImage: {
      x: 50,
      y: 75
    },
    handler: false,
    target: null,
    closable: true,
    closeBtn: true,
    zIndex: 65555,
    overlayOpacity: .7,
    classWindow: "",
    classOverlay: "",
    overlayFx: {},
    resizeFx: {},
    contentFx: {},
    parse: false,
    parseSecure: false,
    shadow: true,
    overlay: true,
    document: null,
    ajaxOptions: {}
  },
  initialize: function(e) {
    if (this.options) return this;
    this.presets = Object.merge(this.presets, e);
    this.doc = this.presets.document || document;
    this.options = {};
    this.setOptions(this.presets).build();
    this.bound = {
      window: this.reposition.bind(this, [null]),
      scroll: this.checkTarget.bind(this),
      close: this.close.bind(this),
      key: this.onKey.bind(this)
    };
    this.isOpen = this.isLoading = false;
    return this
  },
  build: function() {
    this.overlay = new Element("div", {
      id: "sbox-overlay",
      "aria-hidden": "true",
      styles: {
        zIndex: this.options.zIndex
      },
      tabindex: -1
    });
    this.win = new Element("div", {
      id: "sbox-window",
      role: "dialog",
      "aria-hidden": "true",
      styles: {
        zIndex: this.options.zIndex + 2
      }
    });
    if (this.options.shadow) {
      if (Browser.chrome || Browser.safari && Browser.version >= 3 || Browser.opera && Browser.version >= 10.5 || Browser.firefox && Browser.version >= 3.5 || Browser.ie && Browser.version >= 9) {
        this.win.addClass("shadow")
      } else if (!Browser.ie6) {
        var e = (new Element("div", {
          "class": "sbox-bg-wrap"
        })).inject(this.win);
        var t = function(e) {
          this.overlay.fireEvent("click", [e])
        }.bind(this);
        ["n", "ne", "e", "se", "s", "sw", "w", "nw"].each(function(n) {
          (new Element("div", {
            "class": "sbox-bg sbox-bg-" + n
          })).inject(e).addEvent("click", t)
        })
      }
    }
    this.content = (new Element("div", {
      id: "sbox-content"
    })).inject(this.win);
    this.closeBtn = (new Element("a", {
      id: "sbox-btn-close",
      href: "#",
      role: "button"
    })).inject(this.win);
    this.closeBtn.setProperty("aria-controls", "sbox-window");
    this.fx = {
      overlay: (new Fx.Tween(this.overlay, Object.merge({
        property: "opacity",
        onStart: Events.prototype.clearChain,
        duration: 250,
        link: "cancel"
      }, this.options.overlayFx))).set(0),
      win: new Fx.Morph(this.win, Object.merge({
        onStart: Events.prototype.clearChain,
        unit: "px",
        duration: 750,
        transition: Fx.Transitions.Quint.easeOut,
        link: "cancel",
        unit: "px"
      }, this.options.resizeFx)),
      content: (new Fx.Tween(this.content, Object.merge({
        property: "opacity",
        duration: 250,
        link: "cancel"
      }, this.options.contentFx))).set(0)
    };
    document.id(this.doc.body).adopt(this.overlay, this.win)
  },
  assign: function(e, t) {
    return (document.id(e) || $$(e)).addEvent("click", function() {
      return !SqueezeBox.fromElement(this, t)
    })
  },
  open: function(e, t) {
    this.initialize();
    if (this.element != null) this.trash();
    this.element = document.id(e) || false;
    this.setOptions(Object.merge(this.presets, t || {}));
    if (this.element && this.options.parse) {
      var n = this.element.getProperty(this.options.parse);
      if (n && (n = JSON.decode(n, this.options.parseSecure))) this.setOptions(n)
    }
    this.url = (this.element ? this.element.get("href") : e) || this.options.url || "";
    this.assignOptions();
    var r = r || this.options.handler;
    if (r) return this.setContent(r, this.parsers[r].call(this, true));
    var i = false;
    return this.parsers.some(function(e, t) {
      var n = e.call(this);
      if (n) {
        i = this.setContent(t, n);
        return true
      }
      return false
    }, this)
  },
  fromElement: function(e, t) {
    return this.open(e, t)
  },
  assignOptions: function() {
    this.overlay.addClass(this.options.classOverlay);
    this.win.addClass(this.options.classWindow)
  },
  close: function(e) {
    var t = typeOf(e) == "domevent";
    if (t) e.stop();
    if (!this.isOpen || t && !Function.from(this.options.closable).call(this, e)) return this;
    this.fx.overlay.start(0).chain(this.toggleOverlay.bind(this));
    this.win.setProperty("aria-hidden", "true");
    this.fireEvent("onClose", [this.content]);
    this.trash();
    this.toggleListeners();
    this.isOpen = false;
    return this
  },
  trash: function() {
    this.element = this.asset = null;
    this.content.empty();
    this.options = {};
    this.removeEvents().setOptions(this.presets).callChain()
  },
  onError: function() {
    this.asset = null;
    this.setContent("string", this.options.errorMsg || "An error occurred")
  },
  setContent: function(e, t) {
    if (!this.handlers[e]) return false;
    this.content.className = "sbox-content-" + e;
    this.applyTimer = this.applyContent.delay(this.fx.overlay.options.duration, this, this.handlers[e].call(this, t));
    if (this.overlay.retrieve("opacity")) return this;
    this.toggleOverlay(true);
    this.fx.overlay.start(this.options.overlayOpacity);
    return this.reposition()
  },
  applyContent: function(e, t) {
    if (!this.isOpen && !this.applyTimer) return;
    this.applyTimer = clearTimeout(this.applyTimer);
    this.hideContent();
    if (!e) {
      this.toggleLoading(true)
    } else {
      if (this.isLoading) this.toggleLoading(false);
      this.fireEvent("onUpdate", [this.content], 20)
    } if (e) {
      if (["string", "array"].contains(typeOf(e))) {
        this.content.set("html", e)
      } else {
        this.content.adopt(e)
      }
    }
    this.callChain();
    if (!this.isOpen) {
      this.toggleListeners(true);
      this.resize(t, true);
      this.isOpen = true;
      this.win.setProperty("aria-hidden", "false");
      this.fireEvent("onOpen", [this.content])
    } else {
      this.resize(t)
    }
  },
  resize: function(e, t) {
    this.showTimer = clearTimeout(this.showTimer || null);
    var n = this.doc.getSize(),
      r = this.doc.getScroll();
    this.size = Object.merge(this.isLoading ? this.options.sizeLoading : this.options.size, e);
    var i = self.getSize();
    if (this.size.x == i.x) {
      this.size.y = this.size.y - 50;
      this.size.x = this.size.x - 20
    }
    if (n.x > 979) {
      var s = {
        width: this.size.x,
        height: this.size.y,
        left: (r.x + (n.x - this.size.x - this.options.marginInner.x) / 2).toInt(),
        top: (r.y + (n.y - this.size.y - this.options.marginInner.y) / 2).toInt()
      }
    } else {
      var s = {
        width: n.x - 40,
        height: n.y,
        left: (r.x + 10).toInt(),
        top: (r.y + 20).toInt()
      }
    }
    this.hideContent();
    if (!t) {
      this.fx.win.start(s).chain(this.showContent.bind(this))
    } else {
      this.win.setStyles(s);
      this.showTimer = this.showContent.delay(50, this)
    }
    return this.reposition()
  },
  toggleListeners: function(e) {
    var t = e ? "addEvent" : "removeEvent";
    this.closeBtn[t]("click", this.bound.close);
    this.overlay[t]("click", this.bound.close);
    this.doc[t]("keydown", this.bound.key)[t]("mousewheel", this.bound.scroll);
    this.doc.getWindow()[t]("resize", this.bound.window)[t]("scroll", this.bound.window)
  },
  toggleLoading: function(e) {
    this.isLoading = e;
    this.win[e ? "addClass" : "removeClass"]("sbox-loading");
    if (e) {
      this.win.setProperty("aria-busy", e);
      this.fireEvent("onLoading", [this.win])
    }
  },
  toggleOverlay: function(e) {
    if (this.options.overlay) {
      var t = this.doc.getSize().x;
      this.overlay.set("aria-hidden", e ? "false" : "true");
      this.doc.body[e ? "addClass" : "removeClass"]("body-overlayed");
      if (e) {
        this.scrollOffset = this.doc.getWindow().getSize().x - t
      } else {
        this.doc.body.setStyle("margin-right", "")
      }
    }
  },
  showContent: function() {
    if (this.content.get("opacity")) this.fireEvent("onShow", [this.win]);
    this.fx.content.start(1)
  },
  hideContent: function() {
    if (!this.content.get("opacity")) this.fireEvent("onHide", [this.win]);
    this.fx.content.cancel().set(0)
  },
  onKey: function(e) {
    switch (e.key) {
      case "esc":
        this.close(e);
      case "up":
      case "down":
        return false
    }
  },
  checkTarget: function(e) {
    return e.target !== this.content && this.content.contains(e.target)
  },
  reposition: function() {
    var e = this.doc.getSize(),
      t = this.doc.getScroll(),
      n = this.doc.getScrollSize();
    var r = this.overlay.getStyles("height");
    var i = parseInt(r.height);
    if (n.y > i && e.y >= i) {
      this.overlay.setStyles({
        width: n.x + "px",
        height: n.y + "px"
      });
      this.win.setStyles({
        left: (t.x + (e.x - this.win.offsetWidth) / 2 - this.scrollOffset).toInt() + "px",
        top: (t.y + (e.y - this.win.offsetHeight) / 2).toInt() + "px"
      })
    }
    return this.fireEvent("onMove", [this.overlay, this.win])
  },
  removeEvents: function(e) {
    if (!this.$events) return this;
    if (!e) this.$events = null;
    else if (this.$events[e]) this.$events[e] = null;
    return this
  },
  extend: function(e) {
    return Object.append(this, e)
  },
  handlers: new Hash,
  parsers: new Hash
};
SqueezeBox.extend(new Events(function() {})).extend(new Options(function() {})).extend(new Chain(function() {}));
SqueezeBox.parsers.extend({
  image: function(e) {
    return e || /\.(?:jpg|png|gif)$/i.test(this.url) ? this.url : false
  },
  clone: function(e) {
    if (document.id(this.options.target)) return document.id(this.options.target);
    if (this.element && !this.element.parentNode) return this.element;
    var t = this.url.match(/#([\w-]+)$/);
    return t ? document.id(t[1]) : e ? this.element : false
  },
  ajax: function(e) {
    return e || this.url && !/^(?:javascript|#)/i.test(this.url) ? this.url : false
  },
  iframe: function(e) {
    return e || this.url ? this.url : false
  },
  string: function(e) {
    return true
  }
});
SqueezeBox.handlers.extend({
  image: function(e) {
    var t, n = new Image;
    this.asset = null;
    n.onload = n.onabort = n.onerror = function() {
      n.onload = n.onabort = n.onerror = null;
      if (!n.width) {
        this.onError.delay(10, this);
        return
      }
      var e = this.doc.getSize();
      e.x -= this.options.marginImage.x;
      e.y -= this.options.marginImage.y;
      t = {
        x: n.width,
        y: n.height
      };
      for (var r = 2; r--;) {
        if (t.x > e.x) {
          t.y *= e.x / t.x;
          t.x = e.x
        } else if (t.y > e.y) {
          t.x *= e.y / t.y;
          t.y = e.y
        }
      }
      t.x = t.x.toInt();
      t.y = t.y.toInt();
      this.asset = document.id(n);
      n = null;
      this.asset.width = t.x;
      this.asset.height = t.y;
      this.applyContent(this.asset, t)
    }.bind(this);
    n.src = e;
    if (n && n.onload && n.complete) n.onload();
    return this.asset ? [this.asset, t] : null
  },
  clone: function(e) {
    if (e) return e.clone();
    return this.onError()
  },
  adopt: function(e) {
    if (e) return e;
    return this.onError()
  },
  ajax: function(e) {
    var t = this.options.ajaxOptions || {};
    this.asset = (new Request.HTML(Object.merge({
      method: "get",
      evalScripts: false
    }, this.options.ajaxOptions))).addEvents({
      onSuccess: function(e) {
        this.applyContent(e);
        if (t.evalScripts !== null && !t.evalScripts) Browser.exec(this.asset.response.javascript);
        this.fireEvent("onAjax", [e, this.asset]);
        this.asset = null
      }.bind(this),
      onFailure: this.onError.bind(this)
    });
    this.asset.send.delay(10, this.asset, [{
      url: e
    }])
  },
  iframe: function(e) {
    var t = this.doc.getSize();
    if (t.x > 979) {
      var n = this.options.size.x;
      var r = this.options.size.y
    } else {
      var n = t.x;
      var r = t.y - 50
    }
    this.asset = new Element("iframe", Object.merge({
      src: e,
      frameBorder: 0,
      width: n,
      height: r
    }, this.options.iframeOptions));
    if (this.options.iframePreload) {
      this.asset.addEvent("load", function() {
        this.applyContent(this.asset.setStyle("display", ""))
      }.bind(this));
      this.asset.setStyle("display", "none").inject(this.content);
      return false
    }
    return this.asset
  },
  string: function(e) {
    return e
  }
});
SqueezeBox.handlers.url = SqueezeBox.handlers.ajax;
SqueezeBox.parsers.url = SqueezeBox.parsers.ajax;
SqueezeBox.parsers.adopt = SqueezeBox.parsers.clone;

/**
 * SqueezeBox - Expandable Lightbox
 *
 * Allows to open various content as modal,
 * centered and animated box.
 *
 * @version		1.3
 *
 * @license		MIT-style license
 * @author		Harald Kirschner <mail [at] digitarald.de>
 * @author		Rouven Weßling <me [at] rouvenwessling.de>
 * @copyright	Author
 */

#sbox-overlay {
  position: absolute;
  background-color: #000;
  left: 0px;
  top: 0px;
}
#sbox-window {
  position: absolute;
  background-color: #fff;
  text-align: left;
  overflow: visible;
  padding: 10px;
  /* invalid values, but looks smoother! */
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
#sbox-window[aria-hidden=true],
#sbox-overlay[aria-hidden=true] {
  display: none;
}
#sbox-btn-close {
  position: absolute;
  width: 30px;
  height: 30px;
  right: -15px;
  top: -15px;
  background: url(../images/modal/closebox.png) no-repeat center;
  border: none;
}
.sbox-loading #sbox-content {
  background-image: url(../images/modal/spinner.gif);
  background-repeat: no-repeat;
  background-position: center;
}
#sbox-content {
  clear: both;
  overflow: auto;
  background-color: #fff;
  height: 100%;
  width: 100%;
}
.sbox-content-image#sbox-content {
  overflow: visible;
}
#sbox-image {
  display: block;
}
.sbox-content-image img {
  display: block;
  width: 100%;
  height: 100%;
}
.sbox-content-iframe#sbox-content {
  overflow: visible;
}
/* Hides scrollbars */

.body-overlayed {
  overflow: hidden;
}
/* Hides flash (Firefox problem) and selects (IE) */

.body-overlayed embed,
.body-overlayed object,
.body-overlayed select {
  visibility: hidden;
}
#sbox-window embed,
#sbox-window object,
#sbox-window select {
  visibility: visible;
}
/* Shadows */

#sbox-window.shadow {
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}
.sbox-bg {
  position: absolute;
  width: 33px;
  height: 40px;
}
.sbox-bg-n {
  left: 0;
  top: -40px;
  width: 100%;
  background: url(../images/modal/bg_n.png) repeat-x;
}
.sbox-bg-ne {
  right: -33px;
  top: -40px;
  background: url(../images/modal/bg_ne.png) no-repeat;
}
.sbox-bg-e {
  right: -33px;
  top: 0;
  height: 100%;
  background: url(../images/modal/bg_e.png) repeat-y;
}
.sbox-bg-se {
  right: -33px;
  bottom: -40px;
  background: url(../images/modal/bg_se.png) no-repeat;
}
.sbox-bg-s {
  left: 0;
  bottom: -40px;
  width: 100%;
  background: url(../images/modal/bg_s.png) repeat-x;
}
.sbox-bg-sw {
  left: -33px;
  bottom: -40px;
  background: url(../images/modal/bg_sw.png) no-repeat;
}
.sbox-bg-w {
  left: -33px;
  top: 0;
  height: 100%;
  background: url(../images/modal/bg_w.png) repeat-y;
}
.sbox-bg-nw {
  left: -33px;
  top: -40px;
  background: url(../images/modal/bg_nw.png) no-repeat;
}
@-moz-document url-prefix() {
  .body-overlayed {
    overflow: visible;
  }
}
@media (max-width: 979px) {
  #sbox-window {
    overflow: none;
  }
  #sbox-btn-close {
    right: -10px;
    top: -10px;
  }
}
@media (max-device-width: 979px) {
  #sbox-content {
    -webkit-overflow-scrolling: touch;
  }
  #sbox-content.sbox-content-iframe {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
  }
}

<form action="../massmail.php" method="post">
  <label>Periode:</label>
  <div class="form-inline">
    <input class="form-inline input-small" name="maand" type="text" placeholder="bijv.: juni" />
    <input class="input-mini" name="jaar" type="text" value="2015" />
  </div>
  <br />
  <label>Inleidende tekst:</label>
  <div>
    <textarea name="inleiding" rows="5"></textarea>
  </div>
  <br />
  <label>url van de nieuwsbrief:</label>
  <div>
    <input class="input-xxlarge" name="link" type="url" value="" />
  </div>
  <div class="form-actions">
    <button class="btn btn-primary" type="submit">Verzenden</button>
    <button class="btn" formaction="../voorbeeld.php" formmethod="get" type="submit">Voorbeeld</button>
    <a href="index.php">
      <button class="btn" type="button">Annuleren</button>
    </a>
  </div>
</form>

Answer 1

问题已经解决了。 我使用了第二行(工作弹出窗口)。

<a class="btn modal" href="voorbeeld.php" rel="{handler: 'iframe', size: {x: 920, y: 530}}">Voorbeeld</a>

如前所述，这确实会打开弹出窗口，但它似乎没有处理表单，所以我删除了 <a> 中的按钮它应该处理表单但没有将其发送到弹出窗口。

然后我使用 Javascript 获取了表单数据:

var id = window.parent.document.getElementById('id').value;

为此，您要在弹出窗口中使用的所有表单元素都必须有一个 id。

希望这对遇到此问题的任何人有所帮助。