Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>One of the cleanest modals out there is the one provided in the <a href="http://twitter.github.com/bootstrap/" rel="nofollow">twitter bootstrap</a>. To implement it, you just need to be using <strong><a href="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" rel="nofollow">jQuery</a></strong> and <strong><a href="http://twitter.github.com/bootstrap/1.4.0/bootstrap-modal.js" rel="nofollow">modal.js</a></strong>. As per your additional request for alerts, you will also need to add <strong><a href="http://twitter.github.com/bootstrap/1.4.0/bootstrap-alerts.js" rel="nofollow">alert.js</a>.</strong> If you don't want to use <a href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.css" rel="nofollow">their CSS</a>, it's relatively easy to implement in your CSS as well:</p> <p>HTML:</p> <pre><code>&lt;div class="modal hide fade" id="my-modal"&gt; &lt;div class="modal-header"&gt; &lt;a href="#" class="close"&gt;&amp;times;&lt;/a&gt; &lt;h3&gt;Modal Heading&lt;/h3&gt; &lt;/div&gt; &lt;div class="modal-body"&gt; &lt;p&gt;One fine body…&lt;/p&gt; &lt;/div&gt; &lt;div class="modal-footer"&gt; &lt;a href="#" class="btn primary"&gt;Primary&lt;/a&gt; &lt;a href="#" class="btn secondary"&gt;Secondary&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="alert-message success hide fade in" data-alert="alert"&gt; &lt;a class="close" href="#"&gt;&amp;times;&lt;/a&gt; &lt;p&gt;&lt;strong&gt;Well done!&lt;/strong&gt; You successfully &lt;a href="#"&gt;read this&lt;/a&gt; alert message.&lt;/p&gt; &lt;/div&gt; </code></pre> <p>JS:</p> <pre><code>$('#my-modal').modal(true); $(".alert-message").alert(); $('#my-modal').bind('hidden', function () { $(".alert-message").removeClass("hide"); }); </code></pre> <p>You might end up using something other than <code>bind()</code> to fire the <code>removeClass()</code> function.</p> <p>CSS:</p> <pre><code>.hide { display: none; } .fade { -webkit-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear; -ms-transition: opacity 0.15s linear; -o-transition: opacity 0.15s linear; transition: opacity 0.15s linear; opacity: 0; } .fade.in { opacity: 1; } .close { float: right; color: #000000; font-size: 20px; font-weight: bold; line-height: 13.5px; text-shadow: 0 1px 0 #ffffff; filter: alpha(opacity=25); -khtml-opacity: 0.25; -moz-opacity: 0.25; opacity: 0.25; } .close:hover { color: #000000; text-decoration: none; filter: alpha(opacity=40); -khtml-opacity: 0.4; -moz-opacity: 0.4; opacity: 0.4; } /* Modal */ .modal-backdrop { background-color: #000000; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000; } .modal-backdrop.fade { opacity: 0; } .modal-backdrop, .modal-backdrop.fade.in { filter: alpha(opacity=80); -khtml-opacity: 0.8; -moz-opacity: 0.8; opacity: 0.8; } .modal { position: fixed; top: 50%; left: 50%; z-index: 11000; width: 560px; margin: -250px 0 0 -280px; background-color: #ffffff; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, 0.3); *border: 1px solid #999; /* IE6-7 */ -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; } .modal .close { margin-top: 7px; } .modal.fade { -webkit-transition: opacity .3s linear, top .3s ease-out; -moz-transition: opacity .3s linear, top .3s ease-out; -ms-transition: opacity .3s linear, top .3s ease-out; -o-transition: opacity .3s linear, top .3s ease-out; transition: opacity .3s linear, top .3s ease-out; top: -25%; } .modal.fade.in { top: 50%; } .modal-header { border-bottom: 1px solid #eee; padding: 5px 15px; } .modal-body { padding: 15px; } .modal-body form { margin-bottom: 0; } .modal-footer { background-color: #f5f5f5; padding: 14px 15px 15px; border-top: 1px solid #ddd; -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; -webkit-box-shadow: inset 0 1px 0 #ffffff; -moz-box-shadow: inset 0 1px 0 #ffffff; box-shadow: inset 0 1px 0 #ffffff; zoom: 1; margin-bottom: 0; } .modal-footer:before, .modal-footer:after { display: table; content: ""; zoom: 1; } .modal-footer:after { clear: both; } .modal-footer .btn { float: right; margin-left: 5px; } .modal .popover, .modal .twipsy { z-index: 12000; } /* Alerts */ .alert-message.danger, .alert-message.danger:hover, .alert-message.error, .alert-message.error:hover, .alert-message.success, .alert-message.success:hover, .alert-message.info, .alert-message.info:hover { color: #ffffff; } .alert-message .close { font-family: Arial, sans-serif; line-height: 18px; } .alert-message.danger, .alert-message.error { background-color: #c43c35; background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35)); background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35)); background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35); background-image: -o-linear-gradient(top, #ee5f5b, #c43c35); background-image: linear-gradient(top, #ee5f5b, #c43c35); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border-color: #c43c35 #c43c35 #882a25; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } .alert-message.success { background-color: #57a957; background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); background-image: -moz-linear-gradient(top, #62c462, #57a957); background-image: -ms-linear-gradient(top, #62c462, #57a957); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957)); background-image: -webkit-linear-gradient(top, #62c462, #57a957); background-image: -o-linear-gradient(top, #62c462, #57a957); background-image: linear-gradient(top, #62c462, #57a957); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border-color: #57a957 #57a957 #3d773d; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } .alert-message.info { background-color: #339bb9; background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9)); background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); background-image: -ms-linear-gradient(top, #5bc0de, #339bb9); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9)); background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); background-image: -o-linear-gradient(top, #5bc0de, #339bb9); background-image: linear-gradient(top, #5bc0de, #339bb9); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border-color: #339bb9 #339bb9 #22697d; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } :root .alert-message { border-radius: 0 \0; } .alert-message { position: relative; padding: 7px 15px; margin-bottom: 18px; color: #404040; background-color: #eedc94; background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94)); background-image: -moz-linear-gradient(top, #fceec1, #eedc94); background-image: -ms-linear-gradient(top, #fceec1, #eedc94); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94)); background-image: -webkit-linear-gradient(top, #fceec1, #eedc94); background-image: -o-linear-gradient(top, #fceec1, #eedc94); background-image: linear-gradient(top, #fceec1, #eedc94); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border-color: #eedc94 #eedc94 #e4c652; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); border-width: 1px; border-style: solid; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); } .alert-message .close { margin-top: 1px; *margin-top: 0; } .alert-message a { font-weight: bold; color: #404040; } .alert-message.danger p a, .alert-message.error p a, .alert-message.success p a, .alert-message.info p a { color: #ffffff; } .alert-message h5 { line-height: 18px; } .alert-message p { margin-bottom: 0; } .alert-message div { margin-top: 5px; margin-bottom: 2px; line-height: 28px; } .alert-message .btn { -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); } .alert-message.block-message { background-image: none; background-color: #fdf5d9; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); padding: 14px; border-color: #fceec1; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .alert-message.block-message ul, .alert-message.block-message p { margin-right: 30px; } .alert-message.block-message ul { margin-bottom: 0; } .alert-message.block-message li { color: #404040; } .alert-message.block-message .alert-actions { margin-top: 5px; } .alert-message.block-message.error, .alert-message.block-message.success, .alert-message.block-message.info { color: #404040; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } .alert-message.block-message.error { background-color: #fddfde; border-color: #fbc7c6; } .alert-message.block-message.success { background-color: #d1eed1; border-color: #bfe7bf; } .alert-message.block-message.info { background-color: #ddf4fb; border-color: #c6edf9; } .alert-message.block-message.danger p a, .alert-message.block-message.error p a, .alert-message.block-message.success p a, .alert-message.block-message.info p a { color: #404040; } </code></pre> <p>Preview: <a href="http://jsfiddle.net/Wexcode/G7kRH/" rel="nofollow">http://jsfiddle.net/Wexcode/G7kRH/</a><br> Updated Preview With Alert Message: <a href="http://jsfiddle.net/Wexcode/G7kRH/2/" rel="nofollow">http://jsfiddle.net/Wexcode/G7kRH/2/</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload