The solution to the problem of bootstrap modal frame disappearing _javascript skills

Small series mainly from the online collation of the user to put forward on the bootstrap modal box disappear different problems, I hope to help.

Condition One: bootstrap modal box disappears instantly to solve

Bootstrap modal box is very good, but there are few examples of this, are official code, the Internet does not have a little something new. For example, save changes, that is, click to confirm how to deal with? No examples. Only the close feature is canceled. My demand is this, click a link, pass an ID, open the modal box, input, radio, list selection, and so on, point modal box confirmation, and then together with the ID, the modal box in the various values, together to submit to the background processing.

Step One: Use the link to pass the ID and open the modal box.

<a href= "data-toggle=" modal "onclick=" Prom (' {$. Category.id} ') ' > Add sibling </a>

{{$. Category.id}} is a passed Id value

Using JS code to open the modal box

<script type= "Text/javascript" > 
 
//Add sibling 
 function Prom (ID) { 
 $ (' #myModal '). Modal (' show '); 
 $ (' #myModal '). On (' Hide.bs.modal ', function () { 
 var radio =$ (' input[type= ' Radio ']:checked '). Val (); 
 Alert ("Your choice is: + Radio +".) I'm sorry! The Add feature is temporarily not available. "); 
 }); 
 if (CNAME) 
 //{ 
 //$.ajax ({ 
 //Type: "POST", 
 //URL: "/category/post", 
 //data: {Pid:id,title : cname},//Parent ID 
 //success:function (data,status) { 
 //alert (Add, +data+, success!) (Status: "+status+") "); 
 // } 
 // }); 
 // } 
 } 

Here's The pit:
$ (' #myModal '). Modal (' show ');
If you use only this line of code, the modal box disappears instantly.
Add code later:
$ (' #myModal '). On (' Hide.bs.modal ', function () {
the second step, click the modal box to confirm how to do it? I am very stupid in this way. Here is the modal box button, which I use to cancel the confirmation.

<div class= "Modal-footer" > 
 <button type= "button" class= "btn Btn-default" data-dismiss= "modal" > OK </button> 
 <!--<button type= "button" class= "btn btn-primary" >save changes</button>--> 
</div> 

After clicking OK (which is actually off), it triggers the
$ (' #myModal '). On (' Hide.bs.modal ', function () {
start executing the code inside.

Status two:bootstrap in the Modal box plug-in, click on the cover layer, the modal box does not disappear, how to let go

Code:

Copy Code code as follows:

<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#myModal" > Launch demo modal </ button> <!--Modal--> <div class= "Modal fade" id= "Mymodal" tabindex= "-1" role= "dialog" aria-labelledby= " Mymodal ...

Enthusiastic Netizen gives the answer:

Small weave a little dizzy, do not know everybody understand?

condition Three: In fact, this is the situation. Two other solutions to the problem of "bootstrap modal modal box pops up instantly "

Provide a small example to illustrate.

<button class= "btn btn-primary btn-lg" type= "button" data-toggle= "modal" data-target= "#myModal" >
 Launch Demo Modal
 </button>

Note that the Red Word section type= "button", in the need to trigger the button, to join this paragraph is good.

situation Four: This is the netizen uses bootstrap to sum up the experience " does not let the modal box disappear the method "

If using JavaScript then:

$ (' #myModal '). Modal ({
 backdrop: ' Static ',
 keyboard:false
})
and If HTML:

<a data-controls-modal= "your_div_id" data-backdrop= "Static" data-keyboard= "false" href= "#" >

Status Five: The solution to the problem of bootstrap modal modal box eject instantaneous vanishing

Problem:

Learn to use bootstrap modal, according to the official website example copy the code, in their own pages run when the window pops up, but the moment disappears. Search on the internet for a long time also no answer, I am a novice, here to ask you online.

<%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"%> <% String Path = Request.getcontextpath ()
 ;
String basepath = request.getscheme () + "://" + request.getservername () + ":" + request.getserverport () + path + "/"; %> <! DOCTYPE html>  

And then it just disappears.

User 1: remove the reference modal.js try?

User 2: Everyone, the landlord of the problem solved.
I guess you should all follow the bootstrap website demo in practice, please note that you download the official website of the bootstrap source has two versions, as shown:

Website Demo use is the first, so if you follow the official website of the demo practice, it should only use the first, of course, you can use the second, but can not mix.

Net Friend 3: Today I also met, although it is three months of things. But I still want to post the correct answer, because: Bootstrap.min.js (bootstrap.js) and modal.js Repeat the reference, the modal.js removed the good.

User 4: I also encountered similar problems, but the solution is to delete the Bootstrap.min.js;js conflict problem

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.