Permalink
Browse files

Auto adds close button to footer (or footer+close button)

  • Loading branch information...
kodecount
kodecount committed Feb 21, 2017
1 parent ee49b08 commit 6c65bbfa9fd9a352dfc470863cd09473a79d29d0
@@ -107,7 +107,6 @@
</ol>
</li>
</ol>
<button class="btn btn-primary popup-modal-dismiss" type="button">Close modal popup</button>
</div>
</section>
</li>
@@ -151,7 +150,6 @@
&lt;/header&gt;
&lt;div class="modal-body"&gt;
...
&lt;button class="btn btn-primary popup-modal-dismiss" type="button"&gt;Close modal popup&lt;/button&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;/li&gt;
@@ -106,7 +106,6 @@
</li>
</ol>
<p><a href="#">Lien - apparence par défaut</a></p>
<button class="btn btn-primary popup-modal-dismiss" type="button">Fermer le contenu superposé modal</button>
</div>
</section>
</li>
@@ -155,7 +154,6 @@
&lt;/header&gt;
&lt;div class="modal-body"&gt;
...
&lt;button class="btn btn-primary popup-modal-dismiss" type="button"&gt;Fermer le contenu superposé modal&lt;/button&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;/div&gt;
@@ -120,6 +120,7 @@ var componentName = "wb-lbx",
if ( !i18nText ) {
i18n = wb.i18n;
i18nText = {
fClose: i18n( "close" ),
tClose: i18n( "overlay-close" ) + i18n( "space" ) + i18n( "esc-key" ),
tLoading: i18n( "load" ),
gallery: {
@@ -142,10 +143,13 @@ var componentName = "wb-lbx",
var $item = this.currItem,
$content = this.contentContainer,
$wrap = this.wrap,
$modal = $wrap.find( ".modal-dialog" ),
$buttons = $wrap.find( ".mfp-close, .mfp-arrow" ),
len = $buttons.length,
i, button;
createCloseButton( $modal );
$document.find( "body" ).addClass( "wb-modal" );
$document.find( modalHideSelector ).attr( "aria-hidden", "true" );
for ( i = 0; i !== len; i += 1 ) {
@@ -232,6 +236,7 @@ var componentName = "wb-lbx",
} else {
$response = $( mfpResponse.data );
}
createCloseButton( $response );
$response
.find( ".modal-title, h1" )
@@ -254,6 +259,38 @@ var componentName = "wb-lbx",
$document.trigger( dependenciesLoadedEvent );
}
} );
},
createCloseButton = function( $modal ) {
if ( $modal !== null && $modal.hasClass( "modal-dialog" ) ) {
var footer = $modal.find( ".modal-footer" ).first(),
hasFooter = footer.length,
hasButton = hasFooter && $( footer ).find( ".popup-modal-dismiss" ).length !== 0,
closeClassFtr = "popup-modal-dismiss",
closeTextFtr = i18nText.fClose,
spanTextFtr, overlayCloseFtr;
if ( !hasButton ) {
if ( hasFooter ) {
spanTextFtr = footer.innerHTML + i18nText.tClose;
} else {
footer = document.createElement( "div" );
footer.setAttribute( "class", "modal-footer" );
footer.style.background = "#fff";
spanTextFtr = i18nText.tClose;
}
spanTextFtr = spanTextFtr.replace( "'", "&#39;" );
overlayCloseFtr = "<button type='button' id='ftrClose' class='btn btn-sm btn-primary pull-left " + closeClassFtr +
"' title='" + closeTextFtr + " " + spanTextFtr + "'>" +
closeTextFtr +
"<span class='wb-inv'>" + spanTextFtr + "</span></button>";
$( footer ).append( overlayCloseFtr );
if ( !hasFooter ) {
$modal.append( footer );
}
}
}
};
// Bind the init event of the plugin
@@ -110,7 +110,6 @@
&lt;/header&gt;
&lt;div class=&quot;modal-body&quot;&gt;
...
&lt;button class=&quot;btn btn-primary popup-modal-dismiss&quot; type=&quot;button&quot;&gt;Close modal popup&lt;/button&gt;
&lt;/div&gt;
&lt;/section&gt;</code></pre>
</details>
@@ -222,6 +221,16 @@ wb.doc.on( "click vclick", "#overlay-open-btn", function( event ) {
</details>
</section>
</section>
<section>
<h3>Adding custom close buttons to overlays/modals</h3>
<p>Overlays/Modals through JavaScript are automatically updated with a close overlay/modal button. This button can be changed with the following code:</p>
<pre><code>&lt;div class=&quot;modal-footer&quot;&gt;
...
&lt;button class=&quot;btn btn-primary popup-modal-dismiss&quot; type=&quot;button&quot;&gt;Close overlay/modal&lt;/button&gt;
&lt;/div&gt;</code></pre>
<p><strong>Side Note:</strong> Close buttons must be inside the modal footer (a div with the class <code>modal-footer</code>).</p>
</section>
</section>
<section id="left-panel" class="wb-overlay modal-content overlay-def wb-panel-l">
@@ -356,7 +365,6 @@ wb.doc.on( "click vclick", "#overlay-open-btn", function( event ) {
</ol>
</li>
</ol>
<button class="btn btn-primary popup-modal-dismiss" type="button">Close modal popup</button>
</div>
</section>
@@ -110,7 +110,6 @@
&lt;/header&gt;
&lt;div class=&quot;modal-body&quot;&gt;
...
&lt;button class=&quot;btn btn-primary popup-modal-dismiss&quot;&gt;Fermer le contenu superposé modal&lt;/button&gt;
&lt;/div&gt;
&lt;/section&gt;</code></pre>
</details>
@@ -222,6 +221,19 @@ wb.doc.on( "click vclick", "#overlay-open-btn", function( event ) {
</details>
</section>
</section>
<div lang="en">
<p><strong>Needs translation</strong></p>
<section>
<h3>Adding custom close buttons to overlays/modals</h3>
<p>Overlays/Modals through JavaScript are automatically updated with a close overlay/modal button. This button can be changed with the following code:</p>
<pre><code>&lt;div class=&quot;modal-footer&quot;&gt;
...
&lt;button class=&quot;btn btn-primary popup-modal-dismiss&quot; type=&quot;button&quot;&gt;Close overlay/modal&lt;/button&gt;
&lt;/div&gt;</code></pre>
<p><strong>Side Note:</strong> Close buttons must be inside the modal footer (a div with the class <code>modal-footer</code>).</p>
</section>
</div>
</section>
<section id="panneau-gauche" class="wb-overlay modal-content overlay-def wb-panel-l">
@@ -357,7 +369,6 @@ wb.doc.on( "click vclick", "#overlay-open-btn", function( event ) {
</li>
</ol>
<p><a href="#">Lien - apparence par défaut</a></p>
<button class="btn btn-primary popup-modal-dismiss" type="button">Fermer le contenu superposé modal</button>
</div>
</section>
@@ -78,7 +78,7 @@ var componentName = "wb-overlay",
footer.style.border = "0";
}
overlayCloseFtr = "<button type='button' id='ftrClose' class='btn btn-sm btn-default " + closeClassFtr +
overlayCloseFtr = "<button type='button' id='ftrClose' class='btn btn-sm btn-primary " + closeClassFtr +
"' style='" + buttonStyle +
"' title='" + closeTextFtr + " " + spanTextFtr + "'>" +
closeTextFtr +

0 comments on commit 6c65bbf

Please sign in to comment.