10 examples of 'open bootstrap modal popup using jquery' in JavaScript

82
function ShowModalPopup(modalPopupID) {
83
	var popupID = "#" + modalPopupID;
84
	var popupMarginTop = $(popupID).height() / 2;
85
	var popupMarginLeft = $(popupID).width() / 2;
86
	$('body').css('overflow', 'hidden');
87
	$(popupID).css({
88
		'left': '50%',
89
		'top': '50%',
90
		'margin-top': -popupMarginTop,
91
		'margin-left': -popupMarginLeft,
92
		'display': 'block',
93
		'position': 'fixed',
94
		'z-index': 99999
95
	});
96
97
	var backgroundSelector = $('<div></div>');
98
	backgroundSelector.appendTo('body');
99
100
	backgroundSelector.css({
101
		'width': $(document).width(),
102
		'height': $(document).height(),
103
		'display': 'none',
104
		'background-color': '#000',
105
		'filter':'alpha(opacity=80)',
106
		'position': 'absolute',
107
		'top': 0,
108
		'left': 0,
109
		'z-index': 99998
110
	});
111
112
	backgroundSelector.fadeTo('fast', 0.8);
113
		 backgroundSelector.click(function(){
114
			 HideModalPopup(modalPopupID)
115
	});
116
117
}

89
openModal(id, zIndex, dom, modalClass, modalFade) {
90
    if (Vue.prototype.$isServer) return;
91
    if (!id || zIndex === undefined) return;
92
    this.modalFade = modalFade;
93
94
    const modalStack = this.modalStack;
95
96
    for (let i = 0, j = modalStack.length; i < j; i++) {
97
        const item = modalStack[i];
98
        if (item.id === id) {
99
            return;
100
        }
101
    }
102
103
    const modalDom = this.getModal();
104
105
    addClass(modalDom, 'v-modal');
106
107
    if (this.modalFade && !this.hasModal) {
108
        addClass(modalDom, 'v-modal-enter');
109
    }
110
111
    if (modalClass) {
112
        let classArr = modalClass.trim().split(/\s+/);
113
        classArr.forEach(item => addClass(modalDom, item));
114
    }
115
116
    setTimeout(() => {
117
        removeClass(modalDom, 'v-modal-enter');
118
    }, 200);
119
120
    if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {
121
        dom.parentNode.appendChild(modalDom);
122
    } else {
123
        document.body.appendChild(modalDom);
124
    }
125
126
    if (zIndex) {
127
        modalDom.style.zIndex = zIndex;
128
    }
129
130
    modalDom.tabIndex = 0;
131
    modalDom.style.display = '';
132
133
    this.modalStack.push({ id: id, zIndex: zIndex, modalClass: modalClass });
134
}

26
function openPopup (href) {
27
  if (window.popup && !window.closed) window.popup.close();
28
  var width = 1000;
29
  var height = 800;
30
  var x = (screen.width / 2) - (width / 2);
31
  var y = (screen.height / 2) - (height / 2);
32
  var win = new BrowserWindow({
33
    width, height, x, y,
34
    center: true,
35
    autoHideMenuBar: true,
36
    webPreferences: {
37
      webSecurity: true,
38
      nodeIntegration: false,
39
      plugins: true,
40
    },
41
  });
42
  win.id = 'popup';
43
  win.loadURL(href);
44
  window.win = win;
45
  /*
46
  nw.Window.open('app/popup.html?href=' + encodeURIComponent(href), {x: left, y: top, width: w, height: h},
47
  function (win) {
48
    window.popup = win.window;
49
50
    // do not open the window and open it in external browser
51
    win.on('new-win-policy', function (frame, url, policy) {
52
      policy.ignore();
53
      nw.Shell.openExternal(url);
54
    });
55
56
    win.window.id = 'popup';
57
    win.window.config = App.config;
58
    win.focus();
59
  });
60
  */
61
}

14
function open(title, ev, content) {
15
    var alert = $mdDialog.alert()
16
            .clickOutsideToClose(true)
17
            .title(title)
18
            .ok($filter('translate')('Confirm'))
19
            .targetEvent(ev);
20
    if (content) {
21
        alert.htmlContent(content);
22
    }
23
    var dialog = $mdDialog.show(alert);
24
    return dialog;
25
}

9
function showPopup(popup) {
10
    if (!popupQueue.length) {
11
        popup.show();
12
    }
13
    popupQueue.push(popup);
14
}

1
function openPopup (url, width) {
2
    var left, top, height,
3
        screenLeft = screen.availLeft || 0,
4
        bordersWidth = 8;
5
    // if browser window is in the right half of screen, place new window on left half
6
    if (window.screenX - screenLeft - bordersWidth * 1.5 > width) {
7
        left = window.screenX - width - bordersWidth * 1.5;
8
    // if browser window is in the left half of screen, place new window on right half
9
    } else if (window.screenX + window.outerWidth + width + bordersWidth * 1.5 < screenLeft + screen.availWidth) {
10
        left = window.screenX + window.outerWidth + bordersWidth;
11
        // if screen is small or browser window occupies whole screen, place new window on top of current window
12
    } else {
13
        left = window.screenX + window.outerWidth / 2 - width / 2;
14
        if (left < 0) {
15
            left = 0;
16
        }
17
    }
18
    top = window.screenY;
19
    height = window.innerHeight;
20
    var features = 'width=' + width + ',height=' + height + ',left=' + left + ',top=' + top;
21
    features += ',resizable,scrollbars';
22
    // to open single instance replace null with some string
23
    window.open(url, null, features)
24
        .focus();
25
}

223
function closePopUp(pos){
224
	var position=parseInt(pos);
225
	$('.meet_'+position).remove();
226
	$('.meet_arrow_'+pos).remove();
227
	meetingArr[pos][3]=true;
228
}

1
function popUp(url, title, w, h) {
2
     var externalLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
3
     var externalTop = window.screenTop != undefined ? window.screenTop : screen.top;
4
5
     width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
6
 	 height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
7
8
     var left = ((width / 2) - (w / 2)) + externalLeft;
9
     var top = ((height / 2) - (h / 2)) + externalTop;
10
     var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
11
12
     if (window.focus) {
13
         newWindow.focus();
14
     }
15
 }

86
function close_popup() {
87
  $(document).off('keydown');
88
  $('#popup').hide();
89
}

104
function ShowConfirmPopup( event, targetElt, onClick )
105
{
106
    if ( event )
107
    {
108
        if ( event.stopPropagation )
109
        {
110
            event.stopPropagation();
111
        }
112
        event.cancelBubble = true;
113
    }
114
115
    var confirmElt = document.getElementById( 'uninstallConfirm' );
116
    if ( !confirmElt )
117
    {
118
       RestoreDimButtons();
119
       return;
120
    }
121
122
    confirmElt.style.display = 'block';
123
    $J(confirmElt).offset($J(targetElt).offset());
124
    // Subtract out the confirm border when sizing so that we don't get too big.
125
    confirmElt.style.width = ($J(targetElt).innerWidth() - ( $J(confirmElt).outerWidth() - $J(confirmElt).innerWidth() ) ) + 'px';
126
    confirmElt.style.height = ($J(targetElt).innerHeight() - ( $J(confirmElt).outerHeight() - $J(confirmElt).innerHeight() ) ) + 'px';
127
128
    var yesElt = document.getElementById( 'uninstallConfirmYes' );
129
    if (yesElt)
130
    {
131
        yesElt.onclick = function () { ToggleElementHidden( 'uninstallConfirm', 'block' ); onClick(); };
132
    }
133
}