Online computer courses, code, programming tutorial and sidebar information for monitoring Canadian S&P/TSX index. Build friendship and networking. Welcome to visit my blogs often!!! I also have two other sites: YouTube Channel and Google site.
Adsense
Popular Posts
- PHPWind-- A PHP forum script applcaition in China
- Using Cron Job to process PHP scripts
- job interview questions (1)
- Install PHPMailer 5.2.4 and use smtp gmail
- PHP connect IBM db2 database in XAMPP
- Set up a child account and set screen time limit in Windows 8
- PHP - Export Content to MS Word document
- Datatable export excel wraptext and newline
- Sweet Alert JS library - beautiful replacement of JavaScript Alert
- Powerful js library datable to export table in pdf, excel, sorting, freezing column and table header fixed (sticky)
Wednesday, September 28, 2016
Make bootstrap Modal dialog draggable, move up and change header/footer style
I have Modal code:
<!-- Universal Modal -->
<div class="modal fade" id="universalModal" style="margin-top:-150px;" tabindex="-1" role="dialog" aria-labelledby="universalModalLabel" aria-hidden="true">
<div class="modal-dialog" style="width:1000px;">
<div class="modal-content">
<form role="form" id="universalModalForm">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only"> Close</span></button>
<h4 class="modal-title" id="universalModalLabel"><span class="glyphicon glyphicon-pencil"></span> Edit<span class="modal-title">.model-title</span></h4>
</div>
<div class="alert alert-danger fade in" id="universalModal-alert" style="display: none;">
<span class="alert-body"></span>
</div>
<div class="modal-body">.modal-body</div>
<div class="modal-footer">
<input type="hidden" id='stakeholder_id' name='stakeholder_id'>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary" id="submitBtn"></button>
</div>
</form>
</div>
</div>
</div>
<!-- End Universal Modal -->
1) To move bootstrap Modal dialog up, I used style="margin-top:-150px;" for my id in top div including modal class.
2) To make bootstrap Modal dialog draggable via modal header, body and footer
$('#universalModal').modal('show');
$('#universalModal .modal-dialog').draggable({
handle: ".modal-header, .modal-body, .modal-footer"
});
3) To change header and footer style
<style>
.modal-header {
background-color: #5cb85c;
color:white !important;
text-align: center;
font-size: 20px;
}
.modal-footer {
background-color: #5cb85c;;
}
</style>
Subscribe to:
Posts (Atom)