ericmmartin / simplemodal Goto Github PK

Hello,
I have a simple modal with no height and width set on the css (that's being auto-generated I think which is nice :)
although when setting the options closeHTML to anything other than '' like <a href='#' title='Close'>x</a> I get a very weird result when the modal is about to display, the size is completely ignored somehow

They removed the jQuery.browser.
jQuery.browser was deprecated for 4 years and has been removed now.
simplemodal is failing with error: "Cannot read property 'msie' of undefined"

I've been using this for sometime and have had no issues up until now.

I have an iframe within the modal dialog (with a loader image behind it whilst it loads in).

The iframe page is called twice (I can tell this server side). It appears related to onOpen, if onOpen is removed the the iframe only gets called once.

Great dialog by the way - very impressive I've found it very useful. If this can be resolved I'll be happy to donate.

Line 454:

s.removeExpression('height');

Hey, maintainer(s) of ericmmartin/simplemodal!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library ericmmartin/simplemodal is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "ericmmartin/simplemodal",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

jQuery itself when binding a function/method to an object allows you to pass in arbitrary objects in the 2nd argument as in:

$('#someId').bind('click', {self: this}, this.method);

A method is then called like this:

event.data.self.anotherMethod(); This is an instance call.

The above is extremely useful when writing good OO code in JavaScript. I really don't like having to do the following, in my code:

ClassName.prototype.anotherMethod(); This is a static call.

This is very ugly in my opinion. I realize that JavaScript is not an OO language like Java or Python, etc, but I feel this is still a better option than a static call to the method.

So I guess what I am asking is, is it possible to allow something like this as an argument in your modal options for example?

Carl

I have this script
jQuery(function ($) {
$('#basic-modal .basic').click(function (e) {
e.preventDefault();
$('#basic-modal-content').modal();
});

    $('#closePopup').click(function (e) {
        $.modal.close();
    });

    $("#basic-modal-content").modal({
        onOpen: function (dialog) {
            dialog.overlay.fadeIn('slow', function () {
                dialog.container.slideDown('slow', function () {
                    dialog.data.fadeIn('slow');
                });
            });
        }
    });

    $("#basic-modal-content").modal({
        onClose: function (dialog) {
            dialog.data.fadeOut('slow', function () {
                dialog.container.slideUp('slow', function () {
                    dialog.overlay.fadeOut('slow', function () {
                        $.modal.close(); // must call this!
                    });
                });
            });
        }
    });
    return false;
});

Simple modal opens as soon as my asp.net page loads ? why cant figure out. Please help

I have problems with simplemodal when using it within an iOS device. It does not center the popup properly. Any fixes available?

The demos on your website are not currently working.

The page is incomplete ending with a wordpress error:
Call to undefined method WP_Error::get_item_quantity() in wordpress/wp-content/plugins/wp-twitter-feed/wp-twitter-feed.php on line 72

Hi,

Thank you for a simple and elegant popup, really impressed with it. But i have a problem implementing described below.

My Simple popup will shows on clicking download button. The popup works fine, then I found that my Download link is not working. So I figured out the problem and deleted (e) and return false. Now my Download link and popup works fine.

But now, Inside the popup, there is social Share Bar. That stopped working. Only linked in share is working fine. but Twiiter facebook, G+ stopped working.

If I added return false again, then the social bar will work fine, but the download link stops working.

Do you have any idea about how to fix this strange issue?

I'm using Wordpress.

Good morning.. i am using simple model verion 1.4.4 updated file but there is a problem in IE<=8 version...

.simplemodal-container is the same height as simplemodal-wrap, but that means that if the CSS applies margin, borders or padding and you have long content that scrolls, the modal is bigger than the window.

So the height should be window height - (margin + border + padding)

As a simple check, outerHeight should be <= window height.

Jquery 1.7 adds support for the Asynchronous Module Definition (AMD) API ( https://github.com/amdjs/amdjs-api/wiki/AMD ). It would be great if simplemodal would also now support this. Usually the easiest, most flexible way to do this is to find the appropriate Universal Module Definition pattern from https://github.com/umdjs/umd (probably their simple jqueryPlugin template, https://github.com/umdjs/umd/blob/master/jqueryPlugin.js ), and apply it to simplemodal.

can we have any setting or option by which simple modal show scroll bar in ipad.

I am using simplemodal 1.4.4 to active a dialog , but currently the dialog is partly covered by an iframe. Do you know how to fix it?

Hi,
Option position does not work with percentage.
Line of source: top = parseFloat(st) + parseFloat(s.o.position[0] || hc);
I put an if () if it contains percentage in string, not to use the parsefloat.

When downloading content to simplemodal using Ajax (jquery 1.8.3) - all ok!
If version 1.9 - error "Error: Syntax error, unrecognized expression: ....... in / jquery-1.9.0.min.js Line 2"

Please fix it!

demos http://static.musicforums.ru/calc/

Hi, after updating from jQuery 1.6 to 1.8 this test :

ieQuirks = $.browser.msie &amp;&amp; !$.support.boxModel;

resolves randomly(different PCs same IE9) to true. According to jQuery change logs, boxModel feature is deprecated since v 1.7.1. For my use I bypass this by replacing
!$.support.boxModel with parseInt($.browser.version) < 8 but I'm not sure it's clean solution.

Regards
Ivan

HI Eric,

I have made some modifications to the plugin to allow the contents have liquid widths, like 100% or 8em.

I have add a new option to the plugin 'liquidWidth' that accepts width values like '90%' so the simple modal will adapt to the window when the autoResize option is set.

Here you have the changes. Maybe you can improve it.

marquex@6d5324e

Cheers
Javi

not Support jquery-1.11.0.js

Hi! Great plugin, thank you for your work!

Upon encountering simplemodal on splashthat.com I tried using it with keyboard (tab) and found it difficult. I’ve also noticed there are no labels, aria- and role attributes that help screen readers better process the content.

I’m suggesting to look at what https://github.com/ghosh/micromodal is doing and incorporate their best ideas here too: trapping focus inside the modal dialog, adding labels and proper attributes.

Just checking my code but all looks well and it works on FF. My Safari browser does everything right but when I click the close nothing happens and no clicks are processed.

EDIT: The provided minified zip on google did not work for me. Re-minifed from original and all good. Still remains the issue with Safari not responding to the close using anchor tag and simplemodal-close class.

Any thoughts?

Hi, I bought an addon from serifaddons that uses your PHP @ericmmartin .. It is a contact form. I translated the labels and other UI text to my language (Czech) and it works just fine, I mean, It shows the translated words, sends emails correctly, but it transforms all special characters used in my language (ěščřžýáíé) to the questionmark symbol.. everywhere - on the labels if used, in the email (only in the message field it sends correctly with the spec. char.) I could not figure it out, I tried adding the utf8_encode("..") on each line with label code and then it showed correctly "á" for example, but "š" did not work anyway.. moreover I was not able to apply this to all the parts of the form..

Can you check the code for me please and tell me what is wrong? The Serif support was unable to help me even though I have paid for their addon.. Hopefully you can do more.. I guess it is something with the charset, but I am not experienced enough to figure it out on my own..
The original code without translation is underneath and in the attachment.. The URL I am testing this form is www.onefood.cz/BnB1 where you can see it with translation (the utf8_encode is applied for the labels..)

Thanks!!!!!!
PT

Original files attached here:
Popup-Contact-Form.zip

<?php

/*
 * SimpleModal Contact Form
 * http://simplemodal.com
 *
 * Copyright (c) 2013 Eric Martin - http://ericmmartin.com
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 */

date_default_timezone_set('America/Los_Angeles');

// User settings
$to = "[email protected]";
$subject = "Serif Addons Contact Form";

// Include extra form fields and/or submitter data?
// false = do not include
$extra = array(
    "form_subject"  => true,
    "form_cc"       => true,
    "ip"            => true,
    "user_agent"    => true
);

// Process
$action = isset($_POST["action"]) ? $_POST["action"] : "";
if (empty($action)) {
    // Send back the contact form HTML
    $output = "<div style='display:none'>
    <div class='contact-top'></div>
    <div class='contact-content'>
        <h1 class='contact-title'>Send us a message:</h1>
        <div class='contact-loading' style='display:none'></div>
        <div class='contact-message' style='display:none'></div>
        <form action='#' style='display:none'>
            <label for='contact-name'>*Name:</label>
            <input type='text' id='contact-name' class='contact-input' name='name' tabindex='1001' />
            <label for='contact-email'>*Email:</label>
            <input type='text' id='contact-email' class='contact-input' name='email' tabindex='1002' />";

    if ($extra["form_subject"]) {
        $output .= "
            <label for='contact-subject'>Subject:</label>
            <input type='text' id='contact-subject' class='contact-input' name='subject' value='' tabindex='1003' />";
    }

    $output .= "
            <label for='contact-message'>*Message:</label>
            <textarea id='contact-message' class='contact-input' name='message' cols='40' rows='4' tabindex='1004'></textarea>
            <br/>";

    if ($extra["form_cc"]) {
        $output .= "
            <label>&nbsp;</label>
            <input type='checkbox' id='contact-cc' name='cc' value='1' tabindex='1005' /> <span class='contact-cc'>Send me a copy</span>
            <br/>";
    }

    $output .= "
            <label>&nbsp;</label>
            <button type='submit' class='contact-send contact-button' tabindex='1006'>Send</button>
            <button type='submit' class='contact-cancel contact-button simplemodal-close' tabindex='1007'>Cancel</button>
            <br/>
            <input type='hidden' name='token' value='" . smcf_token($to) . "'/>
        </form>
    </div>
    <div class='contact-bottom'><a href='http://www.ericmmartin.com/projects/simplemodal/'>Powered by SimpleModal</a></div>
</div>";

    echo $output;
}
else if ($action == "send") {
    // Send the email
    $name = isset($_POST["name"]) ? $_POST["name"] : "";
    $email = isset($_POST["email"]) ? $_POST["email"] : "";
    $subject = isset($_POST["subject"]) ? $_POST["subject"] : $subject;
    $message = isset($_POST["message"]) ? $_POST["message"] : "";
    $cc = isset($_POST["cc"]) ? $_POST["cc"] : "";
    $token = isset($_POST["token"]) ? $_POST["token"] : "";

    // make sure the token matches
    if ($token === smcf_token($to)) {
        smcf_send($name, $email, $subject, $message, $cc);
        echo "Your message was successfully sent.";
    }
    else {
        echo "Unfortunately, your message could not be verified.";
    }
}

function smcf_token($s) {
    return md5("smcf-" . $s . date("WY"));
}

// Validate and send email
function smcf_send($name, $email, $subject, $message, $cc) {
    global $to, $extra;

    // Filter and validate fields
    $name = smcf_filter($name);
    $subject = smcf_filter($subject);
    $email = smcf_filter($email);
    if (!smcf_validate_email($email)) {
        $subject .= " - invalid email";
        $message .= "\n\nBad email: $email";
        $email = $to;
        $cc = 0; // do not CC "sender"
    }

    // Add additional info to the message
    if ($extra["ip"]) {
        $message .= "\n\nIP: " . $_SERVER["REMOTE_ADDR"];
    }
    if ($extra["user_agent"]) {
        $message .= "\n\nUSER AGENT: " . $_SERVER["HTTP_USER_AGENT"];
    }

    // Set and wordwrap message body
    $body = "From: $name\n\n";
    $body .= "Message: $message";
    $body = wordwrap($body, 70);

    // Build header
    $headers = "From: $email\n";
    if ($cc == 1) {
        $headers .= "Cc: $email\n";
    }
    $headers .= "X-Mailer: PHP/SimpleModalContactForm";

    // UTF-8
    if (function_exists('mb_encode_mimeheader')) {
        $subject = mb_encode_mimeheader($subject, "UTF-8", "B", "\n");
    }
    else {
        // you need to enable mb_encode_mimeheader or risk 
        // getting emails that are not UTF-8 encoded
    }
    $headers .= "MIME-Version: 1.0\n";
    $headers .= "Content-type: text/plain; charset=utf-8\n";
    $headers .= "Content-Transfer-Encoding: quoted-printable\n";

    // Send email
    @mail($to, $subject, $body, $headers) or 
        die("Unfortunately, a server issue prevented delivery of your message.");
}

// Remove any un-safe values to prevent email injection
function smcf_filter($value) {
    $pattern = array("/\n/","/\r/","/content-type:/i","/to:/i", "/from:/i", "/cc:/i");
    $value = preg_replace($pattern, "", $value);
    return $value;
}

// Validate email address format in case client-side validation "fails"
function smcf_validate_email($email) {
    $at = strrpos($email, "@");

    // Make sure the at (@) sybmol exists and  
    // it is not the first or last character
    if ($at && ($at < 1 || ($at + 1) == strlen($email)))
        return false;

    // Make sure there aren't multiple periods together
    if (preg_match("/(\.{2,})/", $email))
        return false;

    // Break up the local and domain portions
    $local = substr($email, 0, $at);
    $domain = substr($email, $at + 1);


    // Check lengths
    $locLen = strlen($local);
    $domLen = strlen($domain);
    if ($locLen < 1 || $locLen > 64 || $domLen < 4 || $domLen > 255)
        return false;

    // Make sure local and domain don't start with or end with a period
    if (preg_match("/(^\.|\.$)/", $local) || preg_match("/(^\.|\.$)/", $domain))
        return false;

    // Check for quoted-string addresses
    // Since almost anything is allowed in a quoted-string address,
    // we're just going to let them go through
    if (!preg_match('/^"(.+)"$/', $local)) {
        // It's a dot-string address...check for valid characters
        if (!preg_match('/^[-a-zA-Z0-9!#$%*\/?|^{}`~&\'+=_\.]*$/', $local))
            return false;
    }

    // Make sure domain contains only valid characters and at least one period
    if (!preg_match("/^[-a-zA-Z0-9\.]*$/", $domain) || !strpos($domain, "."))
        return false;   

    return true;
}

exit;

?>

it seems that that you cannot cancel out of the onClose callback with any combination of return false/stopPropogation because s.unbindEvents is being called (line 675) before the callback is run.

A simple proposal that wouldn't change existing behavior is the to move unbindEvents inside the if blocks for callback/non-callback closing, continue always calling it in the case of no callback, and call it unless the callback returns false when inside the callback branch of that if statement. If this seems reasonable, I'll make a PR.

I have a modal with two buttons in it. Both of these buttons should open another modal.

But both of these buttons don't open the other modals. If I add the buttons to open the second and third modal to the body and not to the first modal they both open.

Is there any way to get this to work?

Hello,

Currently, I am using simplemodal plugin into one of my project, its is working fine, but along with that I am also using JqueryUI datepicker widget, I have textfield into simplemodal dialog and I need to show a datepicker tigger by image Icon. but when I click the Trigger Image datepicker don't showing up..

If any solution then let me know..

Hi ,

I am using this plugin in my project with jquery and JSP .

I have stuck in below scenario : on load popup form will open with ajax response and after submitting from if its success close existing popup and open new one . if its error should stay on same .

On load popup is loading very slow more than 1sec .

Please help me with this.

Thanks in Advance.

bower.json:

"license": "**GPL**",

I think it should be GPL、MIT

"license": [
  "MIT",
  "GPL"
]

Reference: simplemodal/License.txt

I'm using Chosen JS drop down along with the Simple Modal. When I'm closing and re-opening the modal Chosen drop down is not working. Below are the details..

JS Fiddle Link: http://jsfiddle.net/357k84sv/1/
Chosen JS: http://harvesthq.github.io/chosen/
Jquery SimpleModal: http://www.ericmmartin.com/simplemodal-1-4-4-released/

Please help.

When displaying iframe on simple modal with iframe multiple request is initiated.

Attaching the code

http://pastie.org/3744550

and here

http://jsfiddle.net/Viren/X5T63/

please check the request log in web inspector

instead $('.' + s.o.closeClass).bind('click.simplemodal', ...
better use $(document_or_body).delegate('click.simplemodal', '.' + s.o.closeClass, ...
as click button could appear a bit later after .bindEvents() called

Hello, Eric!
I found a strange bug.
Contact button does not work in URLs what have more 1 tiers like this:
http://www.nwsol.ru/IT-%D0%B0%D1%83%D1%82%D1%81%D0%BE%D1%80%D1%81%D0%B8%D0%BD%D0%B3/Service-desk.html

And perfect working with URL like http://www.nwsol.ru/SaaS and http://www.nwsol.ru/asc.html
I use simplemodal-demo-contact-1.4.4.

jQuery 1.9 is not supported, .browser has been deprecated in 1.3 and is now removed. What's necessary to change for jQuery 1.9 compatibility?

Using bower, I get the project and I don't have the min file to use. I need build the project and this isn't efficient. Normally the library folder is in gitignore and when other developers checkout the project, they need compile the bower plugin.

Hi,

The ckeditor text area is uneditable when placed on the simple modal dialog box. Please assist with this issue since I'm not sure how the ckeditor can be initialized using the onShow function. Thanks

The content of my modal is dynamic so I am updating the container size onOpen. This works fine except the modal won't initially be centered vertically. However, it is centered the next time it's opened again. How do I make sure it always is?

hay,
it would be nice, to have the possibility to call a modal inside another modal :).

Can't tell but seems like activity has been scant, and releases even scant-er? Would be helpful to note in the README if this is no longer actively maintained...

If I have a modal element inside a <form> (for example, a textbox with a "submit" button) the plugin moves the div in DOM, which is outside the form, and the form is not POSTed to the server.

If the dialog's DOM is manipulated while it's open - all changes are lost after closing.

The plugin is not compatible with latest (1.9) version of JQuery

You can create with
$.modal($('

however, if you create the modal like below,
$.modal('

so if you apply patch below,
@@ -231,6 +231,7 @@
*/
init: function (data, options) {
var s = this;

•       var testData = null;
  
      // don't allow multiple calls
      if (s.d.data) {
  

  @@ -270,6 +271,9 @@
  }
  }
  }

•       else if (typeof data === 'string' && (testData = $(data)).length > 0) {
  

•           data = testData;
  

•       }
      else if (typeof data === 'string' || typeof data === 'number') {
          // just insert the data as innerHTML
          data = $('<div></div>').html(data);
  

You can use HTML string as data.

Sorry for the sloppy patch.
It's my first patch...

Hi,

since version 1.4.2 simplemodal doesn't work anymore in all IE-Browsers if you use Doctype Transitional.
To reproduce the problem you can use the basic example and replace the Doctype with this one:

Because I have to embed simplemodal in an existing website I cant change the Doctype. Version 1.4.1 works fine.

In the latest google chrome v. 16.0.912.21 you will receive the following warning in the console:
event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

rt

What about having new option something like "initFocus"
that would omitted focus function so the new modal would not have focus set anywhere
I just had to manually override the focus function I am using simplemodal just as loading overlay and it broke focus order under it..

Is there any chance we can get a tag/release for 1.4.5 - I'm using Bower to retrieve simplemodal and it would be make life simpler to have the tag.

Using version 1.4.3 release with a fairly simple calls
It works on all other IE versions and other browsers makes, just collapses on IE6

called using:

$('#popup-box').modal({
opacity: 50,
overlayId: 'popup-box-overlay',
containerId: 'overlay-container',
closeClass: 'modal-close'
});

This is my code:

var message = {
    init:function(){
        $.modal('<iframe src="ajax/view-message/"+msg_id+"/" height="440" width="800">', {
            containerId:'order-view-container',
            overlayId:'view-overlay',
            overlayClose:true,
            onOpen:view_message.open,
        });
 },
     open:function(dialog){
        dialog.overlay.fadeIn('fast', function () {
            dialog.container.fadeIn('fast', function () {
                dialog.data.show();
            });
        });
  };

message.init();
}

Now checking the calls in chrome network it calls the iframe src twice, the first one is cancelled immediately and the second one succeeds