JavaScript Archives • Catzie.net Blog

CSS / JavaScript: Twitter Bootstrap center modal vertically on mobile web view

I’ve been working with modal boxes using Twitter Bootstrap. And the page I’m working on needs to be viewed in mobile devices. The modal looks nice and centered when viewed on desktop, but when run in mobile web browsers, it’s aligned to the top.

Someone on StackOverflow suggested the use of a helper div plus some custom CSS to align Bootstrap modals vertically.

Code for modal:

<div class=”modal fade” id=”myModal” tabindex=”-1″ role=”dialog” aria-labelledby=”myModalLabel” aria-hidden=”true”>
    <div class=”vertical-alignment-helper”>
        <div class=”modal-dialog vertical-align-center”>
            <div class=”modal-content”>
                <div class=”modal-header”>
                    <button type=”button” class=”close” data-dismiss=”modal”><span aria-hidden=”true”>&times;</span><span class=”sr-only”>Close</span>

                    </button>
                     <h4 class=”modal-title” id=”myModalLabel”>Modal title</h4>

                </div>
                <div class=”modal-body”>…</div>
                <div class=”modal-footer”>
                    <button type=”button” class=”btn btn-default” data-dismiss=”modal”>Close</button>
                    <button type=”button” class=”btn btn-primary”>Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<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=“myModalLabel”>Modal title</h4>

</div>

<button type=“button” class=“btn btn-default” data–dismiss=“modal”>Close</button>

<button type=“button” class=“btn btn-primary”>Save changes</button>

</div>

CSS:

.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

.vertical–alignment–helper {

display:table;

height: 100%;

width: 100%;

pointer–events:none; /* This makes sure that we can still click outside of the modal to close it */

}

.vertical–align–center {

/* To center vertically */

display: table–cell;

vertical–align: middle;

pointer–events:none;

}

.modal–content {

/* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */

width:inherit;

height:inherit;

/* To center horizontally */

margin: 0 auto;

pointer–events: all;

}

Source: Vertically centering Bootstrap modal window

March 14, 2016

JavaScript: Get current function name

getCallingFunctionName() is the important function here.

function getCallingFunctionName() {
    var re = /function (.*?)\(/
    var s = getFunctionName.caller.toString();
    var m = re.exec( s )
    return m[1];
}

function myCurrentFunction(){
    var func_name = getCallingFunctionName();
    alert(func_name);  //displays “myCurrentFunction”
}

myCurrentFunction();

1

2

3

4

5

6

7

8

9

10

11

12

13

function getCallingFunctionName() {

var re = /function (.*?)\(/

var s = getFunctionName.caller.toString();

var m = re.exec( s )

return m[1];

}

function myCurrentFunction(){

var func_name = getCallingFunctionName();

alert(func_name); //displays “myCurrentFunction”

}

myCurrentFunction();

Source: Can I get the name of the currently running function in JavaScript?

March 4, 2016

How to make a basic “Login via Facebook” with PHP & JavaScript

You’ve seen how some popular websites let you register or login via Facebook — Pinterest, Vimeo, Lifehacker, and many more.

In this blog post, I’ll show you the very basic setup of the Facebook login button for your website. It is up to you to enhance the functions of your registration system.

Note: There are periodic updates to the Facebook API, sometimes resulting to issues with previously working implementations of the API. So please note that this tutorial was written in the third week August 2015. 🙂

I began writing this tutorial late in August, but because of other projects, was able to publish it when it’s already September.

(more…)

September 8, 2015

JavaScript: Setting the selected dropdown option by its index number

Long time no new entry. 🙂 Internship is keeping me very busy. In this blog entry I’ll show you how to select a drop down option by specifying its index number.
(more…)

August 10, 2010

Category: JavaScript

CSS / JavaScript: Twitter Bootstrap center modal vertically on mobile web view

JavaScript: Get current function name

How to make a basic “Login via Facebook” with PHP & JavaScript

JavaScript: Setting the selected dropdown option by its index number