Merge pull request #31 from christiannaths/master

New Option: add additional css class(es) to close link

README.md

@@ -132,6 +132,7 @@ These are the supported options and their default values:
   escapeClose: true, // Allows the user to close the modal by pressing `ESC`
   clickClose: true, // Allows the user to close the modal by clicking the overlay
   closeText: 'Close', // Text content for the close <a> tag.
+  closeClass: '', // Add additional class(es) to the close <a> tag.
   showClose: true, // Shows a (X) icon/link in the top-right corner
   modalClass: "modal", // CSS class added to the element being displayed in the modal.
   spinnerHtml: null, // HTML appended to the default spinner during AJAX requests.

examples/index.html

@@ -246,6 +246,66 @@ <h2>Example 7: Fade Transitions</h2>
  <p>This modal starts fading in well after the overlay has finished transitioning.</p>
 </div>
 
+<hr/>
+
+<h2>Example 10: Custom Class for Close Button</h2>
+<p>
+ This <a href="#ex10">example</a> demonstrates how to add extra classes to the close button (for custom styles for the close button):
+</p>
+
+<pre><code> $("#custom-close").modal({
+ closeClass: 'icon-remove',
+ closeText: '!'
+});</code></pre>
+<p>And then of course your custom CSS</p>
+<pre><code>.modal a.close-modal[class*="icon-"] {
+ top: -10px;
+ right: -10px;
+ width: 20px;
+ height: 20px;
+ color: #fff;
+ line-height: 1.25;
+ text-align: center;
+ text-decoration: none;
+ text-indent: 0;
+ background: #900;
+ border: 2px solid #fff;
+ -webkit-border-radius: 26px;
+ -moz-border-radius: 26px;
+ -o-border-radius: 26px;
+ -ms-border-radius: 26px;
+ -moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+ -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+ box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+}</code></pre>
+
+<div id="ex10" class="modal">
+ <p>This modal has a fancy-shmancy close button.</p>
+</div>
+
+<style type="text/css">
+ .modal a.close-modal[class*="icon-"] {
+ top: -10px;
+ right: -10px;
+ width: 20px;
+ height: 20px;
+ color: #fff;
+ line-height: 1.25;
+ text-align: center;
+ text-decoration: none;
+ text-indent: 0;
+ background: #900;
+ border: 2px solid #fff;
+ -webkit-border-radius: 26px;
+ -moz-border-radius: 26px;
+ -o-border-radius: 26px;
+ -ms-border-radius: 26px;
+ -moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+ -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+ box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+ }
+</style>
+
 <script type="text/javascript" charset="utf-8">
  $(function() {
 
@@ -308,6 +368,14 @@ <h2>Example 7: Fade Transitions</h2>
  });
  });
 
+ $('a[href="#ex10"]').click(function(event){
+ event.preventDefault();
+ $(this).modal({
+ closeClass: 'icon-remove',
+ closeText: '!'
+ });
+ });
+
  });
 </script>
 </body>

jquery.modal.js

@@ -104,7 +104,7 @@
  show: function() {
  this.$elm.trigger($.modal.BEFORE_OPEN, [this._ctx()]);
  if (this.options.showClose) {
- this.closeButton = $('<a href="#close-modal" rel="modal:close" class="close-modal">' + this.options.closeText + '</a>');
+ this.closeButton = $('<a href="#close-modal" rel="modal:close" class="close-modal ' + this.options.closeClass + '">' + this.options.closeText + '</a>');
  this.$elm.append(this.closeButton);
  }
  this.$elm.addClass(this.options.modalClass + ' current');
@@ -175,11 +175,11 @@
  if (!current) return;
  current.resize();
  };
- 
+
  // Returns if there currently is an active modal
  $.modal.isActive = function () {
  return current ? true : false;
- } 
+ }
 
  $.modal.defaults = {
  overlay: "#000",
@@ -188,6 +188,7 @@
  escapeClose: true,
  clickClose: true,
  closeText: 'Close',
+ closeClass: '',
  modalClass: "modal",
  spinnerHtml: null,
  showSpinner: true,