How to Prevent Bootstrap Modal from Closing when Clicking Outside by using CSS?

Prevent Bootstrap Modal from Closing when Clicking Outside

By expanding the modal-dialog dimensions to full window, we can avoid the outside click close.


//CSS
.modal {
    background-color: rgba(0,0,0,0.5);
}
.modal-dialog{
    width: 100%;
    height: 100vh;
    margin: 0 !important;
}
.modal-content {
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: auto;
    top: 15%;
}
@media (min-width: 600px){
.modal-content {
    width: 700px;
}
}
Continue Reading

How to Create a full screen bootstrap carousel slider?

Create a full-page bootstrap carousel

We can develop a full screen bootstrap carousel or slider by using below scripts.


/* full page carousel */
jQuery(document).ready(function () {
$('.carousel').carousel({
	pause: "false"
});
$('.carousel').css({ 'margin': 0, 'width': $(window).outerWidth(), 'height': $(window).outerHeight() });
//$('.carousel-inner').css({'z-index': 0});
$('.carousel .item').css({ 'position': 'fixed', 'width': '100%', 'height': '100%' });
$('.carousel-inner div.itemimg').each(function () {
	varimgSrc = $(this).attr('src');
	$(this).parent().css({ 'background': 'url(' + imgSrc + ') center center no-repeat', '-webkit-background-size': '100% ', '-moz-background-size': '100%', '-o-background-size': '100%', 'background-size': '100%', '-webkit-background-size': 'cover', '-moz-background-size': 'cover', '-o-background-size': 'cover', 'background-size': 'cover' });
	$(this).remove();
});
$(window).on('resize', function () {
	$('.carousel').css({ 'width': $(window).outerWidth(), 'height': $(window).outerHeight() });
});
});

Continue Reading

How to Change the background color of odd and even row?

Change the background color for odd and event panel of accordion

‘Odd’ and ‘even’ pseudo classes are used to selecting the odd and even number of row.

Script:


  $(function(){
    $('.panel-group > .panel-default:even').addClass('even');
    $('.panel-group > .panel-default:odd').addClass('odd');
});

Explanation:
By using odd and even classes we can set the required background color using CSS.

Continue Reading