Skip to content

Commit a7b640c

Browse files
CodeHimBlogCodeHimBlog
committed
Upload file: bpopup-by-dinbror.html
1 parent cd07c12 commit a7b640c

File tree

1 file changed

+365
-0
lines changed

1 file changed

+365
-0
lines changed

‎jquery-plugins/bpopup-by-dinbror.html‎

Lines changed: 365 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,365 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Bpopup by Dinbror</title>
7+
<meta name="description" content="bPopup is a lightweight jQuery modal popup plugin (only 1.34KB gzipped). It doesn&#039;t create or style your popup but provides you with all the logic like centerin...">
8+
<meta name="author" content="dinbror">
9+
<meta name="robots" content="index, follow">
10+
<!-- Canonical URL -->
11+
<link rel="canonical" href="https://codehimblog.github.io/jquery-plugins/bpopup-by-dinbror.html">
12+
<!-- Favicon -->
13+
<link rel="icon" href="/favicon.ico" type="image/png">
14+
<!-- Bootstrap CSS -->
15+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
16+
<!-- Bootstrap Icons -->
17+
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
18+
<link rel="stylesheet" href="/css/styles.css">
19+
</head>
20+
<body>
21+
<!-- Navbar -->
22+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
23+
<div class="container">
24+
<a class="navbar-brand" href="https://codehimblog.github.io">
25+
<i class="bi bi-box-seam me-2"></i>CodehimBlog
26+
</a>
27+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
28+
<span class="navbar-toggler-icon"></span>
29+
</button>
30+
<div class="collapse navbar-collapse" id="navbarNav">
31+
<ul class="navbar-nav ms-auto">
32+
<li class="nav-item">
33+
<a class="nav-link" href="https://codehimblog.github.io/"><i class="bi bi-house-door me-1"></i> Home</a>
34+
</li>
35+
<li class="nav-item">
36+
<a class="nav-link" href="https://codehimblog.github.io/projects/"><i class="bi bi-box me-1"></i> Projects</a>
37+
</li>
38+
<li class="nav-item">
39+
<a class="nav-link" href="https://codehimblog.github.io/about.html"><i class="bi bi-book me-1"></i> About</a>
40+
</li>
41+
<li class="nav-item">
42+
<a class="nav-link" href="https://codehimblog.github.io/contact.html"><i class="bi bi-envelope me-1"></i> Contact</a>
43+
</li>
44+
</ul>
45+
</div>
46+
</div>
47+
</nav>
48+
49+
<!-- Breadcrumbs -->
50+
<div class="container mt-4 breadcrumbs">
51+
<nav aria-label="breadcrumb">
52+
<ol class="breadcrumb mb-0">
53+
<li class="breadcrumb-item"><a href="https://codehimblog.github.io/">Home</a></li>
54+
<li class="breadcrumb-item"><a href="https://codehimblog.github.io/jquery-plugins/">jQuery Plugins</a></li>
55+
<li class="breadcrumb-item active" aria-current="page">Bpopup</li>
56+
</ol>
57+
</nav>
58+
</div>
59+
60+
<!-- Schema Markup for Breadcrumbs -->
61+
<script type="application/ld+json">
62+
{
63+
"@context": "https://schema.org",
64+
"@type": "BreadcrumbList",
65+
"itemListElement": [
66+
{
67+
"@type": "ListItem",
68+
"position": 1,
69+
"name": "Home",
70+
"item": "https://codehimblog.github.io/"
71+
},
72+
{
73+
"@type": "ListItem",
74+
"position": 2,
75+
"name": "jQuery Plugins",
76+
"item": "https://codehimblog.github.io/jquery-plugins/"
77+
},
78+
{
79+
"@type": "ListItem",
80+
"position": 3,
81+
"name": "Bpopup",
82+
"item": "https://codehimblog.github.io/projects/{{packageSlug}}"
83+
}
84+
]
85+
}
86+
</script>
87+
<!-- Main Content -->
88+
<div class="container mt-3">
89+
<div class="row">
90+
<!-- Main Details -->
91+
<main class="col-md-8 site-main p-0">
92+
<article>
93+
<!-- Project Name & Description -->
94+
<h1 id="packageName">Bpopup</h1>
95+
<p id="packageDescription" class="text-muted">bPopup is a lightweight jQuery modal popup plugin (only 1.34KB gzipped). It doesn&#039;t create or style your popup but provides you with all the logic like centering, modal overlay, events and more. It gives you a lot of opportunities to customize so it will fit your needs. </p>
96+
97+
98+
99+
<!-- Statistics -->
100+
<div class="stat-row d-flex justify-content-around align-items-center text-center mb-2">
101+
<div class="stat-box d-flex align-items-center flex-column-mobile">
102+
<i class="bi bi-star-fill text-warning mb-2"></i>
103+
<div>
104+
<span id="stargazersCount" class="stat-value">427</span>
105+
<p class="stat-label mb-0">Stars</p>
106+
</div>
107+
</div>
108+
109+
<div class="stat-box d-flex align-items-center flex-column-mobile">
110+
<i class="bi bi-box-arrow-in-down mb-2"></i>
111+
<div>
112+
<span id="repoSize" class="stat-value">0.47 MB</span>
113+
<p class="stat-label mb-0">Size</p>
114+
</div>
115+
</div>
116+
117+
<div class="stat-box d-flex align-items-center flex-column-mobile">
118+
<i class="bi bi-arrow-repeat text-secondary mb-2"></i>
119+
<div>
120+
<span id="forksCount" class="stat-value">258</span>
121+
<p class="stat-label mb-0">Forks</p>
122+
</div>
123+
</div>
124+
125+
<div class="stat-box d-flex align-items-center flex-column-mobile">
126+
<i class="bi bi-exclamation-circle text-danger mb-2"></i>
127+
<div>
128+
<span id="openIssuesCount" class="stat-value">33</span>
129+
<p class="stat-label mb-0">Open Issues</p>
130+
</div>
131+
</div>
132+
</div>
133+
134+
135+
<div class="ad-unit ad-apt">
136+
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7089100907045419"
137+
crossorigin="anonymous"></script>
138+
<!-- CodehimBlog APT -->
139+
<ins class="adsbygoogle"
140+
style="display:block"
141+
data-ad-client="ca-pub-7089100907045419"
142+
data-ad-slot="4990741913"
143+
data-ad-format="auto"
144+
data-full-width-responsive="true"></ins>
145+
<script>
146+
(adsbygoogle = window.adsbygoogle || []).push({});
147+
</script>
148+
</div>
149+
150+
<div class="row mb-4">
151+
<!-- Tabs (Left) -->
152+
<div class="col-12 col-md-6 d-flex justify-content-start mb-3 mb-md-0">
153+
<ul class="nav nav-tabs" id="infoTabs" role="tablist">
154+
<li class="nav-item" role="presentation">
155+
<button class="nav-link active" id="installation-tab" data-bs-toggle="tab" data-bs-target="#installation" type="button" role="tab" aria-controls="installation" aria-selected="true">
156+
<i class="bi bi-file-earmark-text"></i> Readme
157+
</button>
158+
</li>
159+
<li class="nav-item" role="presentation">
160+
<button class="nav-link" id="changelog-tab" data-bs-toggle="tab" data-bs-target="#changelog" type="button" role="tab" aria-controls="changelog" aria-selected="false">
161+
<i class="bi bi-journal-text me-2"></i> Changelog
162+
</button>
163+
</li>
164+
</ul>
165+
</div>
166+
167+
<!-- Action Buttons (Right) -->
168+
<div class="col-12 col-md-6 d-flex align-items-center justify-content-end">
169+
<a href="https://github.com/dinbror/bpopup/archive/refs/heads/master.zip" class="btn btn-primary me-2 action-btn" id="downloadBtn">
170+
<i class="bi bi-cloud-download me-2"></i>Download ZIP
171+
</a>
172+
<a href="https://github.com/dinbror/bpopup" target="_blank" class="btn btn-outline-secondary action-btn" id="githubBtn">
173+
<i class="bi bi-github me-2"></i>Fork on GitHub
174+
</a>
175+
</div>
176+
</div>
177+
<div class="tab-content mt-3" id="infoTabsContent">
178+
<div class="tab-pane fade show active" id="installation" role="tabpanel" aria-labelledby="installation-tab">
179+
<h2>bPopup - If you can't get it up - use bPopup</h2>
180+
<h3>DEMO:</h3>
181+
<p><a href="http://dinbror.dk/bpopup">http://dinbror.dk/bpopup</a></p>
182+
<h3>API:</h3>
183+
<p><a href="http://dinbror.dk/blog/bpopup">http://dinbror.dk/blog/bpopup</a></p>
184+
<h3>DESCRIPTION:</h3>
185+
<p>bPopup is a lightweight jQuery modal popup plugin (only 1.34KB gzipped). It doesn't create or style your popup but provides you with all the logic like centering, modal overlay, events and more. It gives you a lot of opportunities to customize so it will fit your needs.</p>
186+
<h2>CHANGELOG</h2>
187+
<h3>v 0.11.0 (01-24-2015)</h3>
188+
<ul>
189+
<li>Fixed <a href="https://github.com/dinbror/bpopup/issues/7">#7</a> and <a href="https://github.com/dinbror/bpopup/issues/21">#21</a>. Using fallback width as default to fix the width issue when scrollbar visible.</li>
190+
<li>Fixed <a href="https://github.com/dinbror/bpopup/issues/8">#8</a> and <a href="https://github.com/dinbror/bpopup/issues/17">#17</a>. &quot;insideWindow&quot; function updated so it now checks if height OR width is inside window instead of only width AND height.</li>
191+
</ul>
192+
<h3>v 0.10.0 (07-22-2014)</h3>
193+
<ul>
194+
<li>Bugfix: <code>autoClose</code> will not trigger if you close the popup before it times out.</li>
195+
<li>Added: <code>reposition(animateSpeed)</code>, a public function that recalculates the center position of the popup. You can pass an optional animate speed attribute. If not defined it will use the <code>followSpeed</code> value (<a href="https://github.com/dinbror/bpopup/pull/8">#8</a>).<br />
196+
Usage:
197+
<pre class="prettyprint linenums lang-language"><code>var bPopup = $(‘element_to_pop_up’).bPopup();
198+
bPopup.reposition(100); </code></pre></li>
199+
<li>Added: Error handling when loading content with ajax. The first argument in the <code>loadCallback</code> is the status of the ajax request, success or error (<a href="https://github.com/dinbror/bpopup/pull/32">#32</a>).</li>
200+
<li>Added: bower.json (<a href="https://github.com/dinbror/bpopup/issues/25">#25</a>).</li>
201+
</ul>
202+
<h3>v 0.9.4 (08-19-2013)</h3>
203+
<ul>
204+
<li>Added: New transitions, <code>slideUp</code> and <code>slideBack</code>.</li>
205+
<li>Added: <code>transitionClose</code>, gives you the possibility to use a different transition on close.</li>
206+
<li>Added: <code>autoClose</code>, thanks to <a href="https://github.com/Leonidaz">Leonidaz</a> for the suggestion.</li>
207+
<li>Added: <code>iframeAttr</code>, so you now can control what attributes the iframe should have (and enable the scrollbar as many of you wants).</li>
208+
<li>Removed: The minimum 20px gap at the top. It's 0 now.</li>
209+
</ul>
210+
<h3>v 0.9.3 (03-24-2013)</h3>
211+
<ul>
212+
<li>Transition fix: Unbinding events earlier on close to prevent scroll/resize events triggered when closing the popup and using the &quot;slideIn&quot; or &quot;slideDown&quot; transition.</li>
213+
<li>Transition fix: The public close function didn't close the popup when using the &quot;slideIn&quot; or &quot;slideDown&quot; transition.</li>
214+
<li>Transition fix: Exit transition for &quot;slideIn&quot; and &quot;slideDown&quot; will now always slide graceful no matter how much you have scrolled.</li>
215+
<li>Transition fix: Fixed odd behavior when using &quot;slideIn&quot; or &quot;slideDown&quot; with ajax calls.</li>
216+
</ul>
217+
<h3>v 0.9.2 (03-23-2013)</h3>
218+
<ul>
219+
<li>Percentage fix: Resize center fix when using percentage for width/height.</li>
220+
<li>Percentage fix: Recenter fix when using percentage for width/height in ajax(loadUrl) calls.</li>
221+
<li>Improvement: Adding 'debounce' to resize event.</li>
222+
</ul>
223+
<h3>v 0.9.1 (03-10-2013)</h3>
224+
<ul>
225+
<li>Legacy fallback: In version 0.9.0 I changed the default close class from bClose to b-close. To avoid issues when you update to latest version I'm also binding a close event on the old default close class, bModal.</li>
226+
<li>Bugfix: When moving an iframe through the DOM, IE9 will excecute the code in the iframe as many times as moves you make. Each time (but the last one) will return udefined on Object, String, Array etc.</li>
227+
<li>Bugfix: When appending is false no overlay was created.</li>
228+
</ul>
229+
</div>
230+
231+
<div class="tab-pane fade" id="changelog" role="tabpanel" aria-labelledby="changelog-tab">
232+
<ul id="changelogList">
233+
No changelog available.
234+
</ul>
235+
</div>
236+
237+
</div>
238+
239+
<div class="tags mb-2 mt-2">
240+
241+
</div>
242+
243+
</article>
244+
245+
246+
</main>
247+
<!-- Sidebar -->
248+
<aside class="col-md-4 p-0">
249+
<div class="sidebar">
250+
<!-- Owner Section -->
251+
<div class="sidebar-item mb-4">
252+
<div class="ad-unit">
253+
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7089100907045419"
254+
crossorigin="anonymous"></script>
255+
<!-- CodehimBlog Sidebar -->
256+
<ins class="adsbygoogle"
257+
style="display:block"
258+
data-ad-client="ca-pub-7089100907045419"
259+
data-ad-slot="8929986923"
260+
data-ad-format="auto"
261+
data-full-width-responsive="true"></ins>
262+
<script>
263+
(adsbygoogle = window.adsbygoogle || []).push({});
264+
</script>
265+
</div>
266+
<div class="d-flex align-items-center">
267+
<img src="https://avatars.githubusercontent.com/u/3649063?v=4" alt="Owner Avatar" class="rounded-circle me-2 owner-avatar">
268+
<a href="https://github.com/dinbror" target="_blank" id="ownerName" class="sidebar-link">dinbror</a>
269+
</div>
270+
</div>
271+
272+
<!-- Metadata Section -->
273+
<div class="sidebar-item mb-2">
274+
<div class="metadata-item d-flex align-items-center">
275+
<i class="bi bi-calendar me-2"></i>
276+
<strong>Created At:</strong>
277+
<span id="createdAt" class="ms-1">March 10, 2013</span>
278+
</div>
279+
<div class="metadata-item d-flex align-items-center mt-2">
280+
<i class="bi bi-pencil-square me-2"></i>
281+
<strong>Last Updated:</strong>
282+
<span id="updatedAt" class="ms-1">September 4, 2024</span>
283+
</div>
284+
<div class="metadata-item d-flex align-items-center mt-2">
285+
<i class="bi bi-file-earmark-code me-2"></i>
286+
<strong>Language:</strong>
287+
<span id="language" class="ms-1">JavaScript</span>
288+
</div>
289+
290+
<div class="metadata-item d-flex align-items-center mt-2">
291+
<i class="bi bi-shield-check"></i>
292+
<strong>License:</strong>
293+
<span id="license" class="ms-1">Unknown</span>
294+
</div>
295+
<a href="http://dinbror.dk/bPopup" target="_blank" class="btn btn-outline-dark btn-sm" id="homepageBtn">
296+
<i class="bi bi-house-door me-2"></i>Visit Homepage
297+
</a>
298+
299+
</div>
300+
301+
<div class="sidebar-item mb-2">
302+
<li>No dependencies!</li>
303+
</div>
304+
305+
<div class="sidebar-item">
306+
<h5 class="sidebar-title">Contributors</h5>
307+
<ul class="p-0" id="contributorsList">
308+
<ul class="list-group list-group-flush" id="contributorsList"><li class="list-group-item d-flex align-items-center contributor-item"><img src="https://avatars.githubusercontent.com/u/3649063?v=4" alt="dinbror" class="rounded-circle me-3" style="width: 40px; height: 40px;"><div><a href="https://github.com/dinbror" target="_blank" class="text-decoration-none fw-bold">dinbror</a><p class="mb-0 text-muted small">23 contributions</p></div></li></ul>
309+
</ul>
310+
311+
</div>
312+
313+
<div class="ad-unit">
314+
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7089100907045419"
315+
crossorigin="anonymous"></script>
316+
<!-- CodehimBlog Skyscrapper -->
317+
<ins class="adsbygoogle"
318+
style="display:block"
319+
data-ad-client="ca-pub-7089100907045419"
320+
data-ad-slot="7469565592"
321+
data-ad-format="auto"
322+
data-full-width-responsive="true"></ins>
323+
<script>
324+
(adsbygoogle = window.adsbygoogle || []).push({});
325+
</script>
326+
</div>
327+
328+
</div>
329+
</aside>
330+
</div>
331+
</div>
332+
<!-- Footer -->
333+
<footer class="bg-dark text-white text-center py-3 page-footer">
334+
<div class="container">
335+
<p class="mb-2">© 2024 CodehimBlog - Powered by GitHub</p>
336+
<nav>
337+
<ul class="list-inline mb-0">
338+
<li class="list-inline-item">
339+
<a href="/privacy-policy.html" class="footer-link">Privacy Policy</a>
340+
</li>
341+
<li class="list-inline-item">
342+
<span class="text-white">|</span>
343+
</li>
344+
<li class="list-inline-item">
345+
<a href="/terms-and-conditions.html" class="footer-link">Terms and Conditions</a>
346+
</li>
347+
</ul>
348+
</nav>
349+
</div>
350+
</footer>
351+
<!-- Bootstrap Bundle JS -->
352+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
353+
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
354+
<script src="/js/script.js"></script>
355+
<!-- Google tag (gtag.js) -->
356+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-FG2ZX76XGT"></script>
357+
<script>
358+
window.dataLayer = window.dataLayer || [];
359+
function gtag(){dataLayer.push(arguments);}
360+
gtag('js', new Date());
361+
362+
gtag('config', 'G-FG2ZX76XGT');
363+
</script>
364+
</body>
365+
</html>

0 commit comments

Comments
 (0)