.{{ target }}
{background-color: {{ bgcolor }};
color:{{ textcolor }};
}
<button type="button" class="btn btn-info btn-sm {{ target }}" data-toggle="modal" data-target="#{{ target }}">{{ subject }}</button>
<!-- {{ subject }} -->
<!-- {{ subject }} -->
<!-- {{ subject }} -->
<div class="modal fade" id="{{ target }}" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class=" modal-header {{ target }}">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{ subject }} - <!-- <a href="#" class="select-text" data-selector="#{{ target }}a">➕</a> -->
</h4>
</div>
<div id="{{ target }}a" class="modal-body">
<p>This is where content for {{ subject }} goes</p>
</div>
<div class="modal-header {{ target }}">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{ subject }}</h4>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
jQuery.fn.selectText = function(){
this.find('input').each(function() {
if($(this).prev().length == 0 || !$(this).prev().hasClass('p_copy')) {
$('<p class="p_copy" style="position: absolute; z-index: -1;"></p>').insertBefore($(this));
}
$(this).prev().html($(this).val());
});
var doc = document;
var element = this[0];
console.log(this, element);
if (doc.body.createTextRange) {
var range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
}
};
$('.select-text').on('click', function(e) {
var selector = $(this).data('selector');
$(selector).selectText();
e.preventDefault();
});
});//]]>
</script>
.select-text,.select-text:visited {
background-color: #f00;
padding-left:6px;
padding-right:6px;
padding-top:3px;
padding-bottom:3px;
color: #fff;
border:1px solid #000;
margin-left:20px;
text-decoration:none;
}
.select-text:hover,.select-text:active {
background-color: #369;
border:1px solid #000000;
color:#fff;
text-decoration:none;
}
|