Ik heb een Dialoogvenster Bootstrap Modal die ik initieel wil laten zien, wanneer de gebruiker op de pagina klikt, verdwijnt deze. Ik heb het volgende:
$(function () {
$('#modal').modal(toggle)
});
<div class="modal" id='modal'>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Error:</h3>
</div>
<div class="modal-body">
<p>Please correct the following errors:</p>
</div>
</div>
</div>
De modal wordt in eerste instantie weergegeven, maar het sluit niet wanneer deze buiten de modal is geklikt. Ook is het inhoudsgebied niet grijs. Hoe kan ik de modal in eerste instantie krijgen om in eerste instantie weer te geven en vervolgens te sluiten nadat de gebruiker buiten het gebied klikt? En hoe kan ik de achtergrond krijgen om grijs te worden zoals in de demo?
Antwoord 1, Autoriteit 100%
Zet modal('toggle')in plaats van modal(toggle)
$(function () {
$('#modal').modal('toggle');
});
Antwoord 2, Autoriteit 59%
Om bootstrap te sluiten modaal U kunt ‘verbergen’ passeren als optie tot modale methode als volg
$('#modal').modal('hide');
Neem een kijkje op Working viemen hier
bootstrap biedt ook evenementen die u kunt aansluiten op modale-functionaliteit, bijvoorbeeld als u een evenement wilt starten wanneer de modale klaar om voor de gebruiker verborgen te zijn, kunt u het hidden.bs.modalevenement gebruiken. U kunt hier meer lezen over modale methoden en gebeurtenissen in Documentatie
Als geen van de bovenstaande methoden werkt, geef dan een id aan uw sluitknop en activeer de klik op de sluitknop.
Antwoord 3, autoriteit 12%
$('#modal').modal('toggle');
of
$('#modal').modal().hide();
zou moeten werken.
Maar als niets anders werkt, kun je de modale sluitknop rechtstreeks aanroepen:
$("#modal .close").click()
Antwoord 4, autoriteit 5%
dit werkte voor mij:
<span class="button" data-dismiss="modal" aria-label="Close">cancel</span>
gebruik deze link modal close
Antwoord 5, autoriteit 3%
Probeer dit
$('#modal_id').modal('hide');
Antwoord 6, autoriteit 3%
$("#your-modal-id").modal('hide');
Het uitvoeren van deze oproep via klasse ($(".my-modal"))werkt niet.
Antwoord 7, autoriteit 2%
deze is best goed en werkt ook in hoekige 2
$("#modal .close").click()
Antwoord 8
Mijn vijf cent op dit ene is dat ik niet wil moeten richten op de bootstrap modal met een id en aangezien er slechts één modale tegelijk de volgende zou meer dan voldoende om de modale schakelcodes te verwijderen moeten zijn kan gevaarlijk zijn:
$('.modal').removeClass('show');
Antwoord 9
In sommige omstandigheden typefout kan de boosdoener zijn. Bijvoorbeeld, zorg ervoor dat je:
data-dismiss="modal"
en geen
data-dissmiss="modal"
Let op de dubbele “ss” in het tweede voorbeeld dat op de knop Sluiten die niet zal veroorzaken.
Antwoord 10
We kunnen sluiten de modale pop-up op de volgende manieren:
// We use data-dismiss property of modal-up in html to close the modal-up,such as
<div class='modal-footer'><button type='button' class="btn btn-default" data-dismiss='modal'>Close</button></div>
// We can close the modal pop-up through java script, such as
<div class='modal fade pageModal' id='openModal' tabindex='-1' data-keyboard='false' data-backdrop='static'>
$('#openModal').modal('hide'); //Using modal pop-up Id.
$('.pageModal').modal('hide'); //Using class that is defined in modal html.
Antwoord 11
$('.modal.in').modal('hide');
Gebruik bovenstaande code naar de achtergrond van de modale verbergen als u meerdere modale pop in een pagina.
Antwoord 12
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(window).load(function(){
$('#myModal').modal('show');
});
$(function () {
$('#modal').modal('toggle');
});
</script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Antwoord 13
U kunt deze referentie maar als deze link is verwijderd, lees dit dan dit Beschrijving:
Bel een modal met ID Mymodal met een enkele regel JavaScript:
$('#myModal').modal(options)
opties
Opties kunnen worden doorgegeven via gegevenskenmerken of JavaScript. Voor gegevenskenmerken, voegt u de optieaam toe aan Gegevens – , zoals in Data-Backdrop = “” .
|----------- | ------------- | -------- | ---------------------------------------------|
| Name | Type | Default| Description |
|----------- | ------------- | -------- | ---------------------------------------------|
| backdrop | boolean or | true | Includes a modal-backdrop element. |
| | the string | | Alternatively, specify static for a |
| | 'static' | | backdrop which doesn't close the modal |
| | | | on click. |
| | | | |
| keyboard | boolean | true | Closes the modal when escape key is pressed.|
| | | | |
| focus | boolean | true | Puts the focus on the modal when initialized|
| | | | |
| show | boolean | true | Shows the modal when initialized. |
|----------- | ------------- | -------- | ---------------------------------------------|
Methoden
Asynchrone methoden en overgangen
Alle API-methoden zijn asynchroon en starten een overgang. Ze keren terug
aan de beller zodra de overgang is gestart, maar voordat deze eindigt.
Bovendien zal een methodeaanroep op een transitiecomponent zijn:
genegeerd.
.modal(opties)
Activeert uw inhoud als modaal. Accepteert een optioneel optie-object.
$('#myModal').modal({
keyboard: false
})
.modal(‘toggle’)
Handmatig schakelen tussen een modaal. Keert terug naar de beller voordat de modal daadwerkelijk is getoond of verborgen(d.w.z. voordat de gebeurtenis getoond.bs.modal of hidden.bs.modal plaatsvindt).
$('#myModal').modal('toggle')
.modal(‘show’)
Opent handmatig een modaal. Keert terug naar de beller voordat de modal daadwerkelijk is getoond(d.w.z. voordat de gebeurtenis getoond.bs.modal plaatsvindt).
$('#myModal').modal('show')
.modal(‘hide’)
Verbergt handmatig een modaal. Keert terug naar de beller voordat de modal daadwerkelijk is verborgen(d.w.z. voordat de hidden.bs.modal gebeurtenis plaatsvindt).
$('#myModal').modal('hide')
.modal(‘handleUpdate’)
Pas de positie van de modal handmatig aan als de hoogte van een modal verandert terwijl deze open is (d.w.z. als er een schuifbalk verschijnt).
$('#myModal').modal('handleUpdate')
.modal(‘dispose’)
Vernietigt de modal van een element.
Evenementen
Bootstrap’s modale klasse onthult een paar gebeurtenissen voor het aansluiten op modale functionaliteit. Alle modale gebeurtenissen worden afgevuurd op de modale zelf (d.w.z. op de **).
Typ Beschrijving
|---------------- | --------------------------------------------------------------|
| Event Type | Description |
|---------------- | --------------------------------------------------------------|
| show.bs.modal | This event fires immediately when the **show** instance |
| | method is called. If caused by a click, the clicked element |
| | is available as the **relatedTarget** property of the event. |
| | |
| shown.bs.modal | This event is fired when the modal has been made visible to |
| | the user (will wait for CSS transitions to complete). If |
| | caused by a click, the clicked element is available as the |
| | **relatedTarget** property of the event. |
| | |
| hide.bs.modal | This event is fired immediately when the **hide** instance |
| | method has been called. |
| | |
| hidden.bs.modal| This event is fired when the modal has finished being hidden |
| | from the user (will wait for CSS transitions to complete). |
|---------------- | --------------------------------------------------------------|
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})
Antwoord 14
function Delete(){
var id = $("#dgetid").val();
debugger
$.ajax({
type: "POST",
url: "Add_NewProduct.aspx/DeleteData",
data: "{id:'" + id + "'}",
datatype: "json",
contentType: "application/json; charset=utf-8",
success: function (result) {
if (result.d == 1) {
bindData();
setTimeout(function(){ $('#DeleteModal').modal('hide');},1000);
}
}
});
};
Antwoord 15
u kunt gebruiken;
$('#' + $('.modal.show').attr('id')).modal('hide');
Antwoord 16
Ik heb modal Programmatisch afgesloten met deze truc
Voeg een knop in modaal toe met data-dismiss="modal"en verberg de knop met display: none. Hier is hoe het eruit zal zien
<div class="modal fade" id="addNewPaymentMethod" role="dialog">
<div class="modal-dialog">
.
.
.
<button type="button" id="close-modal" data-dismiss="modal" style="display: none">Close</button>
</div>
</div>
Als u modal nu programmatisch wilt sluiten, activeer dan een klikgebeurtenisop die knop, die niet zichtbaar is voor de gebruiker
In Javascript kunt u als volgt op die knop klikken:
document.getElementById('close-modal').click();
Antwoord 17
Na wat testen ontdekte ik dat voor bootstrap modal enige tijd moest wachten voordat de $(.modal).modal('hide')werd uitgevoerd na het uitvoeren van $(.modal).modal('show'). En ik ontdekte dat ik in mijn geval een interval van minimaal 500 milliseconden nodig heb tussen de twee.
Dit is dus mijn testcase en oplossing:
$('.modal-loading').modal('show');
setTimeout(function() {
$('.modal-loading').modal('hide');
}, 500);
Antwoord 18
Het gebruik van modal.hide zou alleen de modal verbergen. Als u overlay onder de modal gebruikt, zou deze er nog steeds zijn. gebruik click call om de modal te sluiten en de overlay te verwijderen.
$("#modalID .close").click()
Antwoord 19
Een andere manier om dit te doen is door eerst de klasse modal-open te verwijderen, waarmee de modal wordt gesloten. Vervolgens verwijder je de klasse modal-achtergrond die de grijsachtige omslag van de modal verwijdert.
De volgende code kan worden gebruikt:
$('body').removeClass('modal-open')
$('.modal-backdrop').remove()
Antwoord 20
Deze code werkte perfect voor mij om een modal te sluiten (ik gebruik bootstrap 3.3)
$('#myModal').removeClass('in')
Antwoord 21
In mijn geval, hoofdpagina van waar Bootstrap Modal werd geactiveerd om niet te reageren na gebruik van $("#modal").modal('toggle');Way, maar begon te reageren in de Opvolgende manier:
$("#submitBtn").on("click",function(){
$("#submitBtn").attr("data-dismiss","modal");
});
Antwoord 22
Dit werkt goed
$(function () {
$('#modal').modal('toggle');
});
Wanneer u echter meerdere modals hebt die op de bovenkant stapt, is het niet effectief, dus in plaats daarvan werkt dit
data-dismiss="modal"
Antwoord 23
In mijn geval heb ik een knop gebruikt om de modal
te tonen
<button type="button" class="btn btn-success" style="color:white"
data-toggle="modal" data-target="#my-modal-to-show" >
<i class="fas fa-plus"></i> Call MODAL
</button>
Dus in mijn code, om de modal te sluiten (die de ID = ‘My-Modal-to-show’ heeft), noem ik die functie (in hoektypescript):
closeById(modalId: string) {
$(modalId).modal('toggle');
$(modalId+ ' .close').click();
}
Als ik $ (modalid) noem .modal (‘Hide’) het werkt niet en ik weet niet waarom
PS.: In mijn modal heeft ik dat knoopelement gecodeerd met. Sluit de klasse
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Antwoord 24
Voeg dit gewoon toe in modaal
div tabindex="-1"
Antwoord 25
Bovendien kunt u “klikken” op een ‘x’, waarmee het dialoogvenster wordt gesloten.
Bijv.:
$(".ui-dialog-titlebar-close").click();
Antwoord 26
soms werkt de oplossing niet, dus je moet de in class correct verwijderen en de css display:none handmatig toevoegen.
$("#modal").removeClass("in");
$("#modal").css("display","none");