标签: zurb-reveal

我试图将zurb揭示与形式整合到反应组件中.到目前为止,下一个代码正确显示模态形式:

ModalForm = React.createClass({
  handleSubmit: function(attrs) {
    this.props.onSubmit(attrs);
    return false;
  },

  render: function(){
    return(
      <div>
        <a href="#" data-reveal-id="formModal" className="button">Add new</a>
        <div id="formModal" className="reveal-modal" data-reveal>
          <h4>Add something new</h4>
          <Form onSubmit={this.handleSubmit} />
          <a className="close-reveal-modal">&#215;</a>
        </div>
      </div>
    );
  }
});

该Form组件非常标准:

Form = React.createClass({
  handleSubmit: function() {
    var body = this.refs.body.getDOMNode().value.trim();
    if (!body) {
      return false;
    }
    this.props.onSubmit({body: body});
    this.refs.body.getDOMNode().value = '';
    return false;
  },
  render: function(){
    return(
      <form onSubmit={this.handleSubmit}>
        <textarea name="body" placeholder="Say something..." ref="body" />
        <input type="submit" value="Send" className="button" /> …

我希望在模式窗口关闭时,在显示模式窗口中播放的视频停止播放(谁没有？).通过将iframe源设置为空,可以使用jQuery轻松完成此操作.

但我无法弄清楚如何让它在回调中工作.模态窗口本身按预期运行.这有效:

$('.close-button', '#video-reveal').on('click', function() {
      $('#video-player').attr("src", "");
       console.log("button event fired");
 });

但是,以下任何一项都没有任何效果:

  // from documentation
    $(document).on('close.fndtn.reveal', '[data-reveal]', function() {
        var modal = $(this);
        console.log("closing reveal event fired");

    }); 
    // my attempt to do it programmatically
    $('[data-reveal]').on ('opened.fndtn.reveal', function() {
        var modal = jQuery(this);
        console.log("opened reveal");

    });

所以感觉就像事件没有解雇一样.我确定它是,但如何捕捉它？

我有一个带有单个Foundation 6 Reveal模式的登陆页面.模态包含页面的联系表单.因此,该模式可以由出现在页面上不同位置的几个按钮触发.所有按钮都应打开相同的"联系表单"模式.

单击任何按钮确实打开模式没有问题.但是,当我们关闭模态时 - 通过单击模态内的"关闭"按钮,或者通过点击键盘上的"Esc" - 页面会自动滚动到页面上最后一个按钮的位置,该按钮是模态.似乎在'close'上模态强制视口滚动到DOM中的最后一个触发器!

显然,这是不受欢迎的行为 - 因为大多数时候访问者不会通过点击最后一个按钮打开模态...

CodePen说明了这个问题:https://codepen.io/icouto/pen/QgJzoJ

代码摘要:

<!-- first trigger button -->
<p><button id="btn1" class="button" data-open="exampleModal1">Click me for a modal</button></p>

<!-- lots of filler text to make the page long -->
<p>lorem ipsum dolor sit amet, etc. etc. etc. </p>

<!-- second trigger button -->
<p><button id="btn2" class="button" data-open="exampleModal1">Click me for a modal</button></p>

<!-- modal window -->
<div class="reveal" id="exampleModal1" data-reveal>
  <h1>Awesome. I Have It.</h1>
  <p …