13
As per bootstrap documentation: Modal
Multiple modes are not supported and require additional code.
I am trying to open various modals within others, these modals are called external files with data-remote
and I’m having a problem, they stay inside each other, it seems redundant but it’s like their index is in the same as the previous modal.
Update of remote method documentation:
Original:
This option is deprecated Since v3.3.0 and has been Removed in v4. We recommend Instead using client-side templating or a data Binding framework, or Calling jQuery.load yourself.
If a remote URL is provided, content will be Loaded one time via jQuery’s load method and Injected into the . modal-content div. If you’re using the data-api, you may alternatively use the href attribute to specify the remote source. An example of this is Shown Below:
<a data-toggle="modal" href="remote.html"data-target="#modal">Click me</a>
Translation:
This option is obsolete since v3.3.0 and will be removed in version 4. We recommend using the remote client-side templating or data Binding or calling jQuery load method.
If a remote URL is provided, the content will be loaded once through the jQuery load method and injected into the div . modal-content. If you are using data-api, you may prefer to use the href attribute to specify the remote source. An example of this is shown below:
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
Example:
Page 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet">
</head>
<body>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div class="modal fade" id="myModal" tabindex="-1" data-remote="pagina2.html" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
Page 2:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">Open Modal 2</button>
</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 class="modal fade" id="myModal2" tabindex="-2" data-remote="pagina3.html" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
</div>
</div>
</div>
The result will be something like:
How could I solve this problem ?
Has a very good plugin called Bootbox to create Alerts, confirms and prompts, in all my projects I do not fail to use them for practicality. It implements the multi-modal maybe take a look at his code will help.
– KaduAmaral
Why create multiple modals if you can concentrate everything on a single modal? Simply change the content, text, form, etc. when loading it.
– Ivan Ferrer
These modals are used in various parts of the system, this way I use data-remote to call each of the screens, they can be modal or not, use everything in a requires code rewriting in various parts of the project thing I want to avoid as much as possible
– Gabriel Rodrigues
You just need to tell what the layout of the modal will be loaded. You don’t need to create 500 modals for this.
– Ivan Ferrer
You have an example ?
– Gabriel Rodrigues
the modals are all the same, you have the buttons below, a heading in the header and the content in the middle.
– Ivan Ferrer
when you load the boostrap modal, you pass the parameters via ajax by jquery, in the data-xxxx-ball attribute, or data-yyyy-square, these parameters can be captured and restructure your modal.
– Ivan Ferrer
here are some examples: http://opensource.locaweb.com.br/locawebstyle/documentacao/componentes/modal/
– Ivan Ferrer
As an example: http://jsfiddle.net/filadown/Lyp615jw/ in the 3 open modal I use
data-remote
to load a page, and on this page it has another modal that should open, but when it opens instead of staying in the normal Indice it becomes an Indice of the open page.– Gabriel Rodrigues
because you do not use the same function jquery dialog() with modal parameter=true https://jqueryui.com/dialog/#modal-form
– SneepS NinjA
@Sneepsninja All right ? Please read the description of the reward she answers your question rsrs.
– Gabriel Rodrigues
ah sorry had not seen.. rsrsr
– SneepS NinjA
@Sneepsninja Pois eh no jqueryui I am ninja in creating modals and it works cool, but I switched to bootstrap and the only resource I could not pass to Bootsrap was it, the worst and that if you go in jqueryui.com and download only with basic(Dialog) will be js/css = 100KB
– Gabriel Rodrigues
@Highlander updated the response, stayed in section 2 of the post, running using remote and href.
– petersonfortes
@petersonfortes As soon as possible I will be conducting the new tests, thank you!
– Gabriel Rodrigues