Spezifische Bootstrap Modal Modal-Hintergrund Farbe/Opazität

Question

Ich habe ein Problem zu ändern, die ich nicht das Styling für bestimmte modalen bearbeiten kann, sondern nur für alle modal mit dem unter css:

.modal-backdrop {background:red;} 

Aber was kann Ändere ich nur das Styling für das zweite Modal, aber nicht alle Modal?

Codepen: http://codepen.io/rae0724/pen/woQpqv

Answer 1

können Sie jQuery verwenden & Bootstrap's Modal Events:

• show.bs.modal - Auslöser, sobald Sie öffnet modal.
• hidden.bs.modal - Triggert, sobald Sie Modal vollständig geschlossen ist.

diese verwenden machen Sie eine 10ms Verzögerung und ändern Sie die background-color des backdrop. Wie:

// Triggers as soon as 'modal1' Opens 
$('.modal1').on('show.bs.modal', function() { 
    setTimeout(function() { 
    $('.modal-backdrop').css('background', 'red'); 
    }, 10); 
}); 

// Triggers as soon as 'modal1' is closed 
$('.modal1').on('hidden.bs.modal', function() { 
    $('.modal-backdrop').css('background', ''); 
}); 


// Triggers as soon as 'modal2' Opens 
$('.modal2').on('show.bs.modal', function() { 
    setTimeout(function() { 
    $('.modal-backdrop').css('background', 'blue'); 
    }, 10); 
}); 

// Triggers as soon as 'modal2' is closed 
$('.modal2').on('hidden.bs.modal', function() { 
    $('.modal-backdrop').css('background', ''); 
}); 

Werfen Sie einen Blick auf die unten Snippet Arbeits:

$('.modal1').on('show.bs.modal', function() { 
 
    setTimeout(function() { 
 
    $('.modal-backdrop').css('background', 'red'); 
 
    }, 10); 
 
}); 
 

 
$('.modal1').on('hidden.bs.modal', function() { 
 
    $('.modal-backdrop').css('background', ''); 
 
}); 
 

 
$('.modal2').on('show.bs.modal', function() { 
 
    setTimeout(function() { 
 
    $('.modal-backdrop').css('background', 'blue'); 
 
    }, 10); 
 
}); 
 

 
$('.modal2').on('hidden.bs.modal', function() { 
 
    $('.modal-backdrop').css('background', ''); 
 
});

.wrap { padding: 15px; } 
 
h1 { font-size: 28px; } 
 
h4, 
 
modal-title { font-size: 18px; font-weight: bold; } 
 

 
.no-borders { border: 0px; } 
 
.body-message { font-size: 18px; } 
 
.centered { text-align: center; } 
 
.btn-primary { background-color: #2086c1; border-color: transparent; outline: none; border-radius: 8px; font-size: 15px; padding: 10px 25px; } 
 
.btn-primary:hover { background-color: #2086c1; border-color: transparent; } 
 
.btn-primary:focus { outline: none; }

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<div class="wrap"> 
 
    <h1>Bootstrap Modal Example</h1> 
 
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".modal1"> 
 
    Modal 1 
 
    </button> 
 
</div> 
 

 
<div class="modal fade modal1" tabindex="-1" role="dialog" aria-labelledby="modal1" aria-hidden="true"> 
 
    
 
    <div class="modal-dialog modal-lg"> 
 
    
 
    <!-- Modal Content: begins --> 
 
    <div class="modal-content"> 
 
     
 
     <!-- Modal Header --> 
 
     <div class="modal-header no-borders"> 
 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
      <h4 class="modal-title" id="gridSystemModalLabel"></h4> 
 
     </div> 
 
    
 
     <!-- Modal Body --> 
 
     <div class="modal-body"> 
 
     <p class="body-message centered"><strong>Modal 1 here.</strong></p> 
 
     </div> 
 
    
 
    </div> 
 
    <!-- Modal Content: ends --> 
 
    
 
    </div> 
 
    
 
</div> 
 

 
<!----------------------> 
 
<div class="wrap"> 
 
    <h1>Bootstrap Modal Example</h1> 
 
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".modal2"> 
 
    Modal 2 
 
    </button> 
 
</div> 
 
    
 
<div class="modal fade modal2" tabindex="-1" role="dialog" aria-labelledby="modal2" aria-hidden="true"> 
 
    
 
    <div class="modal-dialog modal-lg"> 
 
    
 
    <!-- Modal Content: begins --> 
 
    <div class="modal-content"> 
 
    
 
     <!-- Modal Body --> 
 
     <div class="modal-body"> 
 
     <div class="body-message"> 
 
      <h4>Modal 2 here.</h4> 
 
      <p>How to change this background colour?</p> 
 
     </div> 
 
     </div> 
 
    
 
    </div> 
 
    <!-- Modal Content: ends --> 
 
    
 
    </div> 
 
    
 
</div> 
 

 
<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.4/js/bootstrap.min.js"></script>

hoffe, das hilft!

Answer 2

Die unten angegebene Lösung ist ein Patch für Ihre Anforderung. und das Beste, was ich mir ausgedacht habe. Ich habe gerade Java-Skript zu Ihrem Code hinzugefügt. Ich habe deinen Code kein einziges Wort geändert.

$(".modal1").on('shown.bs.modal', function() { 
 
    $('.modal-backdrop').css('background', 'red'); 
 
}); 
 

 
$(".modal1").on('hidden.bs.modal', function() { 
 
    $('.modal-backdrop').css('background', '#000'); 
 
});

.wrap { 
 
    padding: 15px; 
 
} 
 
h1 { 
 
    font-size: 28px; 
 
} 
 
h4, 
 
modal-title { 
 
    font-size: 18px; 
 
    font-weight: bold; 
 
} 
 
.no-borders { 
 
    border: 0px; 
 
} 
 
.body-message { 
 
    font-size: 18px; 
 
} 
 
.centered { 
 
    text-align: center; 
 
} 
 
.btn-primary { 
 
    background-color: #2086c1; 
 
    border-color: transparent; 
 
    outline: none; 
 
    border-radius: 8px; 
 
    font-size: 15px; 
 
    padding: 10px 25px; 
 
} 
 
.btn-primary:hover { 
 
    background-color: #2086c1; 
 
    border-color: transparent; 
 
} 
 
.btn-primary:focus { 
 
    outline: none; 
 
} 
 
.model1 .modal-backdrop { 
 
    background: red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="wrap"> 
 
    <h1>Bootstrap Modal Example</h1> 
 
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".modal1"> 
 
    Modal 1 
 
    </button> 
 
</div> 
 

 
<div class="modal fade modal1" tabindex="-1" role="dialog" aria-labelledby="modal1" aria-hidden="true"> 
 

 
    <div class="modal-dialog modal-lg"> 
 

 
    <!-- Modal Content: begins --> 
 
    <div class="modal-content"> 
 

 
     <!-- Modal Header --> 
 
     <div class="modal-header no-borders"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
     </button> 
 
     <h4 class="modal-title" id="gridSystemModalLabel"></h4> 
 
     </div> 
 

 
     <!-- Modal Body --> 
 
     <div class="modal-body"> 
 
     <p class="body-message centered"><strong>Modal 1 here.</strong> 
 
     </p> 
 
     </div> 
 

 
    </div> 
 
    <!-- Modal Content: ends --> 
 

 
    </div> 
 

 
</div> 
 

 
<!----------------------> 
 
<div class="wrap"> 
 
    <h1>Bootstrap Modal Example</h1> 
 
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".modal2"> 
 
    Modal 2 
 
    </button> 
 
</div> 
 

 
<div class="modal fade modal2" tabindex="-1" role="dialog" aria-labelledby="modal2" aria-hidden="true"> 
 

 
    <div class="modal-dialog modal-lg"> 
 

 
    <!-- Modal Content: begins --> 
 
    <div class="modal-content"> 
 

 
     <!-- Modal Body --> 
 
     <div class="modal-body"> 
 
     <div class="body-message"> 
 
      <h4>Modal 2 here.</h4> 
 
      <p>How to change this background colour?</p> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    <!-- Modal Content: ends --> 
 

 
    </div> 
 

 
</div>