JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
<tr><td>Row 4</td></tr>
<tr><td>Row 5</td></tr>
<tr><td>Row 6</td></tr>
<tr><td>Row 7</td></tr>
<tr><td>Row 8</td></tr>
<tr><td>Row 9</td></tr>
<tr><td>Row 10</td></tr>
<tr><td>Row 11</td></tr>
<tr><td>Row 12</td></tr>
<tr><td>Row 13</td></tr>
<tr><td>Row 14</td></tr>
<tr><td>Row 15</td></tr>
<tr><td>Row 16</td></tr>
<tr><td>Row 17</td></tr>
<tr><td>Row 18</td></tr>
<tr><td>Row 19</td></tr>
<tr><td>Row 20</td></tr>
<tr><td>Row 21</td></tr>
<tr><td>Row 22</td></tr>
<tr><td>Row 23</td></tr>
<tr><td>Row 24</td></tr>
<tr><td>Row 25</td></tr>
<tr><td>Row 26</td></tr>
<tr><td>Row 27</td></tr>
<tr><td>Row 28</td></tr>
<tr><td>Row 29</td></tr>
<tr><td>Row 30</td></tr>
<tr><td>Row 31</td></tr>
<tr><td>Row 32</td></tr>
<tr><td>Row 33</td></tr>
<tr><td>Row 34</td></tr>
<tr><td>Row 35</td></tr>
<tr><td><div id="test" align="center">Click here</div></td></tr>
</table>
CSS
#popup_container {
font-family: Verdana, Aerial;
font-size: 11px;
min-width: 250px; /* Dialog will be no smaller than this */
max-width: 580px; /* Dialog will wrap after this width */
background: #FFF;
border: solid 5px #cd0a0a;
color: #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#popup_title {
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 1.75em;
color: #666;
background: #fef1ec;
border: solid 1px #FFF;
border-bottom: solid 1px #999;
cursor: default;
padding: 0em;
margin: 0em;
}
#popup_content {
background: 16px 16px);
padding: 1em 1.75em;
margin: 0em;
}
#popup_content.alert {
background-image: none;
}
#popup_content.confirm {
background-image: none;
}
#popup_content.prompt {
background-image: none;
}
#popup_message {
padding-left: 48px;
}
#popup_panel {
text-align: center;
margin: 1em 0em 0em 1em;
}
#popup_prompt {
margin: .5em 0em;
}
JavaScript
// jQuery Alert Dialogs Plugin
//
// Version 1.1
//
// Cory S.N. LaViska
// A Beautiful Site (http://abeautifulsite.net/)
// 14 May 2009
//
// Website: http://abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/
//
// Usage:
// jAlert( message, [title, callback] )
// jConfirm( message, [title, callback] )
// jPrompt( message, [value, title, callback] )
//
// History:
//
// 1.00 - Released (29 December 2008)
//
// 1.01 - Fixed bug where unbinding would destroy all resize events
//
// License:
//
// This plugin is dual-licensed under the GNU General Public License and the MIT License and
// is copyright 2008 A Beautiful Site, LLC.
//
(function($) {
$.alerts = {
// These properties can be read/written by accessing $.alerts.propertyName from your scripts at any time
verticalOffset: -175, // vertical offset of the dialog from center screen, in pixels
horizontalOffset: 0, // horizontal offset of the dialog from center screen, in pixels/
repositionOnResize: true, // re-centers the dialog on window resize
overlayOpacity: .01, // transparency level of overlay
overlayColor: '#FFF', // base color of overlay
draggable: true, // make the dialogs draggable (requires UI Draggables plugin)
okButton: ' OK ', // text for the OK button
cancelButton: ' Cancel ', // text for the Cancel button
dialogClass: null, // if specified, this class will be applied to all dialogs
// Public methods
alert: function(message, title, fieldFocus) {
if( title == null ) title = 'Alert';
$.alerts._show(title, message, null, 'alert', fieldFocus);
},
confirm: function(message, title) {
if( title == null ) title = 'Confirm';
$.alerts._show(title, message, null, 'confirm');
},
prompt: function(message, value, title) {
if( title == null ) title = 'Prompt';
$.alerts._show(title, message, value,...