Added Ability to open multiple inner bootstrap modals,

And ability to open modal with anchor tag.

Author: mesut talebi

.gitignore

@@ -0,0 +1,7 @@
+################################################################################
+# This .gitignore file was automatically created by Microsoft(R) Visual Studio.
+################################################################################
+
+/.vs/config/applicationhost.config
+/.vs/Mt.BootstrapLazyload.js/v14/.suo
+/Mt.BootstrapLazyload.js.sln

README.md

@@ -43,6 +43,12 @@ C2) add **data-header** to define the Modal's Header.
 
 C3) add **data-size** to define the Modal's size. (Example: data-size="modal-lg", don't set it you want default size.)
 
+C4) If you are using lazyload modal on an Anchor element, the **href** attribute will be used as **url** and you don't need to add extra data-url.
+
+C5) By Default the Id For lazyload modal is *"LazyloadModal"*, but you can add **id** attribute to the tag that will used to toggle modal, so the id for modal will be
+Id + "Modal". with adding id to the toggle you can open multiple inner modals.
+
+
 **Note: Modal's Markup will automatically append to body, and you don't need to add Modal's markup to body manually.**
 
 **Callback function after Ajax Loaded**
@@ -86,16 +92,17 @@ note: If you are lazy loading your initial tab, you can add a trigger('shown.bs.
      data-header="Preview Product" data-size="modal-lg" data-callback="initProducts()">Preview</button>
 ```
 
+
+
 *The Returned Partial View Content:*
 
 ```
 <div class="modal-body">
-    <!--Contents goes here-->
-
-    <div class="modal-footer">
+    <!--Contents goes here-->    
+</div>
+<div class="modal-footer">
         <!--footer buttons goes here-->
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         <button type="submit" class="btn btn-primary">Save changes</button>
-    </div>
 </div>
 ```

Scripts/MT.BootstrapLazyloader.js

@@ -1,6 +1,6 @@
 /*
 Nuget Package: MT.BootstrapLazyLoader.js 
-Version: 1.2.0
+Version: 1.2.2
 
 Created By: Mesut Talebi (mesut.talebi@gmail.com)
 
@@ -71,10 +71,26 @@ $(function () {
     });
 
     $(document).on('click', '.lazyload.showModal', function (e) {
-        var loader = '<i class="fa fa-spin fa-spinner fa-2x text-info modal-loader"></i>';
         var currHandle = $(this);
+        var url = $(currHandle).data('url');
+        if ($(this).prop("tagName") == "A" && url == undefined) {
+            e.preventDefault();
+            url = $(currHandle).attr('href');
+        }
+
+        var loader = '<i class="fa fa-spin fa-spinner fa-lg text-info modal-loader"></i>';
+
+        //Get Id Of Current Handler to set as Modal Id,  the id of modal will be #HandlerId + Modal
+        var currHandleId = $(currHandle).attr('id');
+
+        if (currHandleId == undefined) {
+            currHandleId = "LazyloadModal";
+        } else {
+            currHandleId += "Modal";
+        }
+
         var modalHtml = "<!--Lazyloaded Modal -->" +
-        "<div class='modal fade' id='LazyloadModal' role='dialog' aria-labelledby='LazyloadModal'>" +
+        "<div class='modal fade' id='" + currHandleId + "' role='dialog' aria-labelledby='" + currHandleId + "'>" +
         "<div class='modal-dialog' role='document'>" +
         "<div class='modal-content'>" +
             "<div class='modal-header'>" +
@@ -86,20 +102,21 @@ $(function () {
         "</div>" +
         "</div>";
 
-        var url = $(currHandle).data('url');
+
+
         var modalHeader = $(currHandle).data('header');
         var modalClass = $(currHandle).data('size');
         var callback = $(currHandle).data('callback');
 
-        var modal = $('#LazyloadModal');
+        var modal = $('#' + currHandleId);
         if (modal.length == 0) {
             $('body').append(modalHtml);
 
-            modal = $('#LazyloadModal');
+            modal = $('#' + currHandleId);
         }
 
         $(modal).find('.modal-header #LazyloadModalLabel').html(modalHeader);
-        $(modal).find('.modal-dialog').addClass(modalClass);
+        $(modal).find('.modal-dialog').removeAttr("class").addClass('.modal-dialog').addClass(modalClass);
 
         //Ajax Get
         $(modal).find('#LazyloadModalContent').html('');