Fixed the nested bug in the Bootstrap modal dialog box.

No more about Bootstrap. The Bootstrap self-built Modal Dialog Box plug-in is easy to use. You only need to define html in the following format, trigger it with js, or trigger it with a common html element that specifies the data attribute, the latter example is as follows:

[Html]
<Div id = "myModal" class = "modal hide fade" data-backdrop = "static">
<Div class = "modal-header">
<Button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true"> x </button>
<H3> dialog box title </Div>
<Div class = "modal-body">
<P> One fine body... </P>
</Div>
<Div class = "modal-footer">
<A href = "#" class = "btn"> close </a>
<A href = "#" class = "btn-primary"> Save changes </a>
</Div>
</Div>

<Div id = "myModal" class = "modal hide fade" data-backdrop = "static">
<Div class = "modal-header">
<Button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true"> x </button>
<H3> dialog box title </Div>
<Div class = "modal-body">
<P> One fine body... </P>
</Div>
<Div class = "modal-footer">
<A href = "#" class = "btn"> close </a>
<A href = "#" class = "btn-primary"> Save changes </a>
</Div>
</Div> the button that defines the data-dismiss = "modal" attribute is used to close the modal dialog box. Let me call it the "close" button. In general, this default setting is normal. The problems I encountered in the project are: the content in the "modal-body" designed by I is a template that dynamically calls different subpage content; when the sub-page contains the definition of another sub-modal dialog box, the problem arises. After the submodal dialog box is displayed, click the "close" button to close the parent modal dialog box. To solve this problem, or a bug of Bootstrap, you need to check the source code.

View the source code of Bootstrap 2.3.1 (uncompressed). You can find the following function in line 872, which defines the constructor of the Modal Dialog Box class:

[Javascript]
Var Modal = function (element, options ){
This. options = options
This. $ element = $ (element)
. Delegate ('[data-dismiss = "modal"]', 'click. dismiss. modal', $. proxy (this. hide, this ))
This. options. remote & this. $ element. find ('. modal-body'). load (this. options. remote)
}

Var Modal = function (element, options ){
This. options = options
This. $ element = $ (element)
. Delegate ('[data-dismiss = "modal"]', 'click. dismiss. modal', $. proxy (this. hide, this ))
This. options. remote & this. $ element. find ('. modal-body'). load (this. options. remote)
} The Modal object is constructed before the Modal dialog box is displayed. We don't need to care about the specific implementation details. We only need to see the "hidden" method (hide) of the modal dialog box in line 3-4 of the Code) the click event that is delegated to an element with the data-dismiss = "modal" attribute. In general, it is: find all the "close" elements with the data-dismiss = "modal" attribute in the parent modal dialog box, specify a click event processing function for them, and close the modal dialog box in this function. When a child page contains the "close" element, it is also assigned to the close operation of the parent dialog box. Therefore, click the child page (submodal dialog box) to close the parent mode dialog box! After finding the cause of the problem, we only need to modify the corresponding selector as needed. Based on the situation encountered by the author, you only need to add a first filter after the selector, which means to select the first "close" element in the parent mode dialog box:

[Javascript]
Var Modal = function (element, options ){
This. options = options
This. $ element = $ (element)
. Delegate ('[data-dismiss = "modal"]: first', 'click. dismiss. modal', $. proxy (this. hide, this ))
This. options. remote & this. $ element. find ('. modal-body'). load (this. options. remote)
}

Var Modal = function (element, options ){
This. options = options
This. $ element = $ (element)
. Delegate ('[data-dismiss = "modal"]: first', 'click. dismiss. modal', $. proxy (this. hide, this ))
This. options. remote & this. $ element. find ('. modal-body'). load (this. options. remote)
} Now, the problem is solved.