JavaScript 分享一个极简的弹窗 JS 插件。

bydmm · January 01, 2014 · 4455 hits

因为弹窗是一个网站很基本的功能,但是弹窗的效果又千差万别,所以我写了一个最基本,几乎不带任何行为和样式的弹窗插件。 这个插件只做一件事。把指定的 DOM 以有遮罩的弹窗的形式,在屏幕的正中央显示。 本插件可以适应不同的弹窗大小。

DEMO: 使用 RJS 的方式弹出了 Blog 的表单,具体的样式自己在 CSS 中定义,和弹窗的行为无关,这样正式这个插件的本意。

<!-- /apps/app/blogs/index.html.erb -->
<%= link_to "New", new_blog_path , remote: true %>
<!--  /apps/app/blogs/_form.html.erb -->
<%= simple_form_for (@blog), html: {id: "js-jumpout-form"} do |f| %>
  <%= f.input :title %>
  <%= f.input :content %>
  <%= f.submit %>
<% end %>
//  /apps/app/blogs/new.js.erb
$("body").append("<%= j render("form") %>");
$("#js-jumpout-form").jumpout(function(){
  // When click this form, this form wiil close
  // Forgive me i know it's so bullshit! But i want show it have a callback;
  $("#js-jumpout-form").click(function(event) {
    $("#js-jumpout-form").closeJumpout();
  });
});

代码在 https://github.com/bydmm/jumpout

No Reply at the moment.
You need to Sign in before reply, if you don't have an account, please Sign up first.