JSFiddle - React, Tailwind, and code Playground
bootstrap modal popup example on load.
by DugSohn
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Button trigger modal -->
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header bg-primary">
<button type="button" class="btn btn-sm btn-default pull-right " data-dismiss="modal" aria-label="Close"><i class="fa fa-remove"></i></button>
<h4 class="modal-title " id="myModalLabel"><i class="fa fa-download"></i> Export Data Options</h4>
</div>
<div class="modal-body">
<h4>
Export Format
</h4>
<div class="btn btn-group">
<button class="btn btn-default">
<i class="fa fa-file-excel-o"></i> Excel
</button>
<button class="btn btn-default">
<i class="fa fa-file-pdf-o"></i> PDF
</button>
<button class="btn btn-default" title="Export Data, Attachements and Logs">
<i class="fa fa-archive"></i> Full Archive
</button>
</div>
<hr>
<h4>
Export Child Records
</h4>
<select class="form-control" disabled>
<option>-- None Available --</option>
</select>
<div class="help-block">
Export full associated child records when present in rows
</div>
<hr>
<h4>
Column Options
</h4>
<div class="checkbox">
<label>
<input type="checkbox">
Export All Columns
</label>
<div class="help-block">
...
CSS
.modal-dialog {
width: 400px;
}
JavaScript
jQuery(document).ready(function(e) {
jQuery('#mymodal').trigger('click');
});