Code Monkey home page Code Monkey logo

jqmodal's Introduction

jqModal

jqModal is a plugin for jQuery to help you display modals, popups, and notices. It is flexible and tiny, akin to a "Swiss Army Knife", and provides a great base for your windowing needs.

Features

  • Designer Frieldly - Use your HTML+CSS for Layout and Styling
  • Translator/i18n friendly - No hardcoded English strings
  • Developer friendly - Extensible through callbacks to make anything possible (gallery slideshows, video-conferencing, &c)
  • Simple support for remotely loaded content (aka "ajax")
  • Multiple Modals per page (including nested Modal-in-Modal)
  • Supported by all browsers capable of running jQuery 1.2.3+

Usage

markup

<a
  class="button"
  data-modal="{{ video_id }}" href="$//www.youtube.com/embed/{{ video_id }}">
  Watch</a>

<div class="modal-dialog modal-video" data-modal="{{ video_id }}">
  <iframe
    width="560"
    height="315"
    src="//www.youtube.com/embed/{{ video_id }}"
    frameborder="0"
    allowfullscreen></iframe>
</div>

script

$('div.modal-dialog').each(function(){

  var modal_id = this.id || $(this).data('modal');
  var trigger = $('a.modal-trigger[data-modal="' + modal_id + '"]');

  $(this).jqm({
    toTop: true,
    trigger: trigger
  });

});

styling

div.modal-dialog {
    display: none;
    position: absolute;
    left: 50%;
    margin-left: -288px;
    padding: 6px 0;
    position: fixed;
    text-align: center;
    top: 17%;
    width: 576px;
    background: #FFF;
}

div.modal-dialog.modal-video {
  background-color: transparent;
}

div.jqmOverlay {
    /* background-color: #FFF; */ /* lighten background */
    background-color: #000; /* darken background */
}

Read the documenttion and more at http://jquery.iceburg.net/jqModal

See Examples / Demonstration

Development

Development of jqModal occurs in the -master branch on jqModal.js. The CHANGELOG.md is to be kept up to date with changes.

Release Process

  • Version jqModal.js header <semver> (YYYY.MM.DD +r<revision>)
    • Update package.json, bumping version
  • Ensure changelog is up to date
  • Tag with : git tag <semver> && git push origin --tags to publish.
    • add release notes via github interface
  • npm publish ./

Get Involved

Report issues to the github issue tracker.

For support, please post to stackoverflow using the jqmodal tag:

The jqModal website code is available on github -- please do contribute improvements.

Author

Brice Burgess @iceburgBrice

Released under the MIT License: http://www.opensource.org/licenses/mit-license.php

jqmodal's People

Contributors

ayyash avatar brandonnoad avatar briceburg avatar jduawa avatar paladox avatar rhizome avatar travisdmathis avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

jqmodal's Issues

modal focus issues (with patch)

jqModal.js_focus.diff.txt
I am putting these two issues together because my patch covers both.
I imagine you might want to rework it.

  1. focusFunc does not run at the right time for an ajax modal, should run after content is loaded.
  2. When pressing tab and shift-tab, focus does not stay strictly within the modal.

minor issue: The code is indented with a mixture of tabs (width 2) and spaces.

Attaching functionality to the modal's trigger

I've got a modal where I'm trying to get information and/or manipulate the modal's trigger (like add a class to it). In the modal's JS, I have a line that looks like this:

hash.w.addClass('foo');

This line attaches the "foo" class to the modal element when the modal is triggered.

Based on this, I thought I could do something similar to add the "foo" class to the triggering element, like so:

hash.t.addClass('foo');

However, this generates the following error:

Uncaught TypeError: hash.t.addClass is not a function

Is there a way to manipulate the modal's trigger, or perform other jQuery functions on it, like get the value of any "data" attributes that it might have?

Close modal AJAX doesn't work

Hi,

I'm using the jQuery version (v.2.1.4) and the last jqModal version (+r25) on a website. Everything works fine except to close a modal when I'm calling it with trigger. I was thinking about a conflict problem but it seems there is the same problem on the demo website : trying the example nĀ°2 (AJAX) it's impossible to close the modal by clicking on the differents links...

jqmodal ajax

You say:
"NOTE: $.jqm() is usually called ONCE per modal. Subsequent calls to $.jqm() will update the modal(s) options using jQuery.extend()".

Am I misreading this? you say that subsequent calls will update the modal(s) options. I dont believe this is working.

I am converting a website to use jqmodal and need to use the old javascript function to call the modal. But the ajax option is not being updated after the first call. see simple simple example below which passes the current time to the text page.

function getpostbox(){

var d=new Date().getTime();
var strurl = 'testajax.asp?dte='+d;

$('#ex2').jqm({ajax:strurl, modal:true}).jqmShow({ overlay: 70 });  

}

Errors on pages with multiple forms

I believe there is an issue using jqModal on a page that has multiple forms. It looks like the initialization process: $('selector').jqm(options) builds a view model with properties for each target, the selector returns. Whereas the show: $('selector').jqmShow() slots the target of the selector into the page's form via .prependTo('form') creating copies of each modal in each of the page's forms. If for instance, you targeted a single modal on the page, but the page had two forms: The view modal would contain data for one modal, but after jqmShow() the page would contain two modals - one in each of the forms.

Buttons don't work on iPad

Since upgrading to +r23, buttons on modal dialogs don't work on the iPad - when you tap them a flashing text cursor appears on the left hand side of the button, as if the browser thinks it is a text input. +r24 doesn't fix it. In +r22 it worked fine.

h is undefined when used with "use strict";

I'm not at ease with github for the moment.

But the solution is to add a "var"

From
// maintain legacy "hash" construct
h = {w: e, c: o, o: v, t: t};

To
// maintain legacy "hash" construct
var h = {w: e, c: o, o: v, t: t};

jQuery parameter problems

You have defined the registration function as
(function(jQuery, window, undefined) {

However later you are using $ as jQuery variable so this parameter has no sense. Correct would be:
(function($, window, undefined) {

So that people can set different jQuery object if needed (see jQuery NoConflict as why this is important).

Mitja

double click error

When occurs double-clicking on the item, jqmOverlay hiding and jqmWindow can not be closed.

ios8 compatibility

I have been using this plugin since r14 in my iPad webclip/webapp without issue.
However I've noticed that since I've updated my iPad to ios8 that this plugin is now incompatible with my codebase.

To be more specific, when the jqmodal dialog is opened a fatal crash occurs that causes my webapp to exit completely!

I will try to debug this issue and provide an update; but if someone has any ideas I'd very much appreciate hearing them!

Thanks,
Tony

to top does not properly append to body in ie8.

to top is not appending to the body as it should in ie8. works fine in ie9+.. is this intended bryce? do you still support ie8 with jqmodal?

div.jqm({
    toTop: true,
    modal: true,
    overlay: 100,
}).jqmShow();

How to cancel a click

Right now, the show event is cancellable if you return false onShow, but the click event needs to be cancellable as well, because I would want to make few checks before loading an Ajax source, so is there a way?

Cannot type into text input on jqModal dialog when modal set to true

I recently upgraded jqModal from r14 to r24.

I'm experiencing the same issue described in this Stack Overflow question: http://stackoverflow.com/questions/29395113/cannot-type-into-text-input-on-jqmodal-dialog-when-modal-set-to-true and the same fix (comment out modal:true).

However, since we are on r24, I'm confused, since your Stack Overflow answer indicates that it was fixed in r23.

Additionally, this changes the functionality of the software I'm writing, since clicking outside the modal didn't previously close the modal. This may or may not be a big deal to the product owners, but I wanted to open this issue to hopefully get some more information before approaching them about it.

Thanks,

Matt

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    šŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. šŸ“ŠšŸ“ˆšŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ā¤ļø Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.