jQuery Modal

The simplest modal you ever did see.

Star

• Automatic binding using HTML semantics
• No images & light-weight (about 1k minified)
• Simple markup makes it easy to style
• Attach custom behaviour using jQuery events
• Close with click or ESC key
• Built by @kylefox рџЌё

# Install

The simplest method is to use the hosted version from cdnjs:

Refer to the README for more installation options.

# Example 1: Open & Close with links

1. Embed modal HTML in document
2. Create a link with rel=»modal:open» and set the href attribute to the modal’s DOM id.

Open Modal

Thanks for clicking. That felt good.
Click close, click the overlay, or press ESC

# Example 2: styled login form & events

This example demonstrates how visually customizable the modal is.

# Example 3: adjusting to content

This example shows how modals are centered automatically. It also demonstrates how a vertical scrollbar appears whenever the modal content overflows.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

# Example 4: AJAX

Use rel=»modal:open» to automatically load the page contents into a modal via AJAX:

You can also manually load AJAX pages into a modal. Note that the AJAX response must be wrapped in a div with class modal :

# Example 5: the un-closable window

This demonstrates how to disable the default methods of closing the modal.

If you do this, be sure to provide the user with an alternate method of closing the window.

# Example 6: Multiple Modals

By default, only one modal can be open at a time. If you open a new modal while an existing modal is open, the existing modal is closed first.

However, if you need to stack multiple modals at the same time, just set the closeExisting option to false .

I’m the third modal. You get the idea.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

I’m the third modal. You get the idea.

# Example 7: Fade Transitions

You can achieve a simple fade effect by specifying the fadeDuration option.

You can also use fadeDelay to control the point during the overlay’s fade in at which the modal fades in. For example, to fade in the modal when the overlay transition is 50% complete:

The default value is 1.0 , meaning the window transition begins once the overlay transition has finished. Values greater than 1.0 mean there is a delay between the completed overlay transition and the start of the window transition:

Tip: set fadeDelay: 0 to have the overlay and window fade in simultaneously.

In the spirit of keeping this library small, fading is the only supported transition. When the modal is closed, both the overal and window transition out simultaneously.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This modal starts fading in once the overlay is 50% faded in.

This modal starts fading in well after the overlay has finished transitioning.

# Example 8: Custom Class for Close Button

This example demonstrates how to add extra classes to the close button (for custom styles for the close button):

And then of course your custom CSS

This modal has a fancy-shmancy close button.

Close current modal and open new modal using jquery

I have two modals, one is View and other is Edit.

Issue is that when I open a view modal and click on edit button then edit modal is open but view modal is still open its will be disappear when edit modal is open.

I am doing like this

I need that when I click on edit button then edit Modal is open and view modal is closed.

4 Answers 4

Here is an working example of how you can do it.

What I would say is close all the modals that are opened and then open only the modal you want. Something like:

Since all modal have a common class ‘modal’ it will close all the modal and show the modal you want.

Hope this helps!! Cheers

This is a bit more dynamic.

Whenever you click an element to activate a modal

• Check if the current modal is open. An open modal has the IN class associated. If this is false we know that the modal you try to open is currently NOT open.
• We then close all modals.
• When there are multiple modals on the same page you might come across the black background not disappearing. To remove this we remove all elements containing the MODAL-BACKDROP class.
• And last we show the modal that is toggled.

How to close modal window with this jquery function?

Below is the Html button and javascript function I have which closes a modal window:

Now the code above does close the modal window which is fine.

But I want to know how to write the code by using this function and html button below:

The above code does not close the modal window, why is this? Both these codes are on the same page by the way.

I am using simplemodal developed by eric martin

Below is full code (QandATable2.php) but it is still not closing modal window when clicking on «Add» button:

Below is the full code which displays all of the information that goes into the modal window (this is in previousquestions.php script). This includes both «Add» and «Close» buttons:

1 Answer 1

From what I remember from the comments, you wanted to close the modal when clicking in an add button inside the modal right?

​ I made your first example (before your question edit) work, take a look at this JSFiddle.

Be careful with the order you show/hide elements and wrap your function inside the $(document).ready() to prevent the code execution before the DOM is loaded.

If you don’t manage to adapt your page to work similarly to my fiddle, you should post more from your page’s code as there’d probably be something causing the plugin to don’t work properly (or switch to another modal plugin).

edit: You’re using an iframe , that’s why you can’t access the parent window’s defined functions from the iframe ‘s scope directly. You could try using the window.opener to access your parent window’s scoped functions, or, to solve all and any window scope problem:

This will load content to the div dynamically through Ajax, which is a better approach and resolves any window scope problems which you were facing.

Either that or switch to a modal plugin which supports loading pages directly to it, for instance, colorbox.

EDIT

Now with your full code it was easy to find a solution, simply add onclick=’parent.closewindow();’ to your add button in your PHP:

This way, it’ll re-use the existing closewindow function and discard the .on binding for the .add buttons. 🙂

Close Bootstrap Modal

I have a bootstrap modal dialog box that I want to show initially, then when the user clicks on the page, it disappears. I have the following:

The modal is displayed initially, but it does not close when clicked outside of the modal. Also, the content area is not greyed out.. How can I get the modal to display initially, then close after the user clicks outside the area? And how can I get the background to be grayed out as in the demo?

26 Answers 26

Put modal(‘toggle’) instead of modal(toggle)

to close bootstrap modal you can pass ‘hide’ as option to modal method as follow

Please take a look at working fiddle here

bootstrap also provide events that you can hook into modal functionality, like if you want to fire a event when the modal has finished being hidden from the user you can use hidden.bs.modal event you can read more about modal methods and events here in Documentation

If none of the above method work, give a id to your close button and trigger click on close button.

But if nothing else works you can call the modal close button directly:

this worked for me:

Try This

Running this call via class ($(«.my-modal»)) won’t work.

this one is pretty good and it also works in angular 2

My five cents on this one is that I don’t want to have to target the bootstrap modal with an id and seeing as there should be only one modal at a time the following should be quite sufficient to remove the modal as toggle could be dangerous:

In some circumstances typing error could be the culprit. For instance, make sure you have:

Notice the double «ss» in the second example that will cause the Close button that fail.

We can close the modal pop-up in the following ways:

use the above code to hide the backdrop of modal if you are using multiple modal pop in one page.

I closed modal Programmatically with this trick

Add a button in modal with data-dismiss=»modal» and hide the button with display: none . Here is how it will look like

Now when you want to close modal Programmatically just trigger a click event on that button, which is not visible to user

In Javascript you can trigger click on that button like this:

After some test, I found that for bootstrap modal need to wait for some time before executing the $(.modal).modal(‘hide’) after executing $(.modal).modal(‘show’) . And i found in my case i need at least 500 milisecond interval between the two.
So this is my test case and solution:

You can see this reference but if this link has been removed, read this description:

Call a modal with id myModal with a single line of JavaScript:

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop=»».

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

.modal(options)

Activates your content as a modal. Accepts an optional options object.

Компоненты

Более десятка повторно используемых компонентов построены так, чтобы обеспечить кнопки, выпадающие меню, группы ввода, навигации, оповещения, и многое другое.

Модальное окно

Модальные окна Имеют обтекаемую форму, но гибкая, диалоговое окно с минимальным набором функций и по умолчанию.

Содержание

autofocus атрибут HTML не имеет никакого эффекта в Bootstrap модальные глаголы. для достижения такого же эффекта, использовать некоторые пользовательские JavaScript:

Открытие нескольких модальных окон не поддерживается

Не открывайте новое модальное окно пока другое всё ещё открыто. Отображение более одного модального окна требует написание дополнительного пользовательского кода.

Размещение разметки модального окна

Всегда старайтесь поместить разметку модального окна в верхнем уровне HTML-документа, чтобы избежать влияния других элементов на внешний вид модального окна и/или его функциональность.

Предостережения для мобильных устройств

Существуют некоторые предостережения относительно использования глагола на мобильных устройствах. Смотрите наши документы поддержки браузера для деталей.

Пример статического

Обработанную модальное окно Заголовок, тело, и набор действий в футере.

Modal title

Переключить модальное окно через JavaScript нажав на кнопку ниже. Он будет скользить вниз и исчезают в верхней части страницы.

Название модального окна

Текст в модальном окне

Моллис УДО, есть номера commodo предполагаемое luctus, ниси erat porttitor лигулы.

Информеры в модальном окне

Эта кнопка должна вызвать диалоговое окно по клику.

Подсказки в модальном окне

Эта ссылка и эта ссылка должна иметь подсказку при наведении.

Переполняя текст для отображения прокрутки;

Кра маттис миннеаполис пурус сидеть амет любого fermentum.. Одио хусто Кра, dapibus AC и это в, egestas егет квам. Морби Лео рисус, порта переменного тока миннеаполис переменного тока, преддверия на Эрос.

Praesent commodo курсус «магна», ООО «нисл» scelerisque миннеаполис эт. Vivamus sagittis lacus Вэл augue laoreet взгляд долор auctor faucibus.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Кра маттис миннеаполис пурус сидеть амет любого fermentum.. Одио хусто Кра, dapibus AC и это в, egestas егет квам. Морби Лео рисус, порта переменного тока миннеаполис переменного тока, преддверия на Эрос.

Praesent commodo курсус «магна», ООО «нисл» scelerisque миннеаполис эт. Vivamus sagittis lacus Вэл augue laoreet взгляд долор auctor faucibus.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Кра маттис миннеаполис пурус сидеть амет любого fermentum.. Одио хусто Кра, dapibus AC и это в, egestas егет квам. Морби Лео рисус, порта переменного тока миннеаполис переменного тока, преддверия на Эрос.

Praesent commodo курсус «магна», ООО «нисл» scelerisque миннеаполис эт. Vivamus sagittis lacus Вэл augue laoreet взгляд долор auctor faucibus.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Сделать модальности можно

Не забудьте добавить role=»dialog» и aria-labelledby=». » , ссылаясь на модальное окно Заголовок, чтобы .modal , и role=»document» к .modal-dialog сам.

Кроме того, вы можете дать описание вашего модальное окно диалог с aria-describedby на .modal .

Встраивание видео YouTube

Встраивание видео YouTube в модальности требует дополнительных JavaScript не в Bootstrap чтобы автоматически остановить воспроизведение и многое другое. Ознакомиться с этой полезной переполнение стека пост для получения дополнительной информации.

Опционные размеры

Модальные окна Имеют два дополнительных размера, доступные через классы модификатор, который будет размещен на .modal-dialog . Эти размеры ударом в некоторые точки останова, чтобы избежать горизонтальной полосы прокрутки на узких окнах.