Bootstrap Modals Z-Index

[Berk]

Hey guys.

So yeah, I'm trying to use bootstrap modals (With 47 Admin Skin) And this appears when I toggle modal:

I don't know why, it does not seem in the admin panel but it includes bootstrap.css so yeah..
I also tried giving modal z-index like a million but it didn't work either.

How may I solve that?

Thanks.

 

[griimnak]

you gotta post the code to get help, dear berko
you're probably missing a div

 

[Berk]

you gotta post the code to get help, dear berko
you're probably missing a div

copied from w3schools lol

 

[TesoMayn]

I don't know what the problem is because you've done a pretty bad job explaining it, but I'm assuming you're talking about the modal being obstructed by the top navigation bar? If that's the case, just adjust the top margin a little to bring it down, or decrease the z-index of the modal (change it to something like -1)

 

[Berk]

I don't know what the problem is because you've done a pretty bad job explaining it, but I'm assuming you're talking about the modal being obstructed by the top navigation bar? If that's the case, just adjust the top margin a little to bring it down, or decrease the z-index of the modal (change it to something like -1)

I meant modal is stuck behind the backdrop,instead of in front of backdrop as usual.

 

[TesoMayn]

I meant modal is stuck behind the backdrop,instead of in front of backdrop as usual.

Oh, post the HTML and CSS either on here, or on

You must be registered for see links

 

[Genial]

Did you read the bootstrap documentation, tells you how to use the modal.

 

[Berk]

Did you read the bootstrap documentation, tells you how to use the modal.

Did you even read the thread?

copied from w3schools lol

Oh, post the HTML and CSS either on here, or on

You must be registered for see links

It uses php so I thought I should post here,

<?php
    $getTasks = $db->prepare("SELECT * FROM tasks WHERE username = :u");
                                    $getTasks->bindParam(':u', $user, PDO::PARAM_STR);
                                    $getTasks->execute();
// some shit going on 


foreach($getTasks as $row){

<div id="<?= $row['id']; ?>" class="modal fade" role="dialog" >
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Task ID <?= $row['id']; ?></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
            <label>ID</label>
            <input type="" name="" value="<?= $row['id']; ?>" disabled class="form-control    ">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
?>

 <?php } ?>

 

[TesoMayn]

I assumed it had PHP, but that's backend so it won't affect how the site looks at all.

What's the CSS?
 
Oh, you literally just copied and pasted it lol
Also your PHP is fucked, you're missing a closing tag

 

[Berk]

I assumed it had PHP, but that's backend so it won't affect how the site looks at all.

What's the CSS?
 
Oh, you literally just copied and pasted it lol
Also your PHP is fucked, you're missing a closing tag

Thiis is he actual code, i wrote it again, lol:

<?php 
foreach($tasks as $row){
    ?>

<div id="<?= $row['id']; ?>" class="modal fade" role="dialog" >
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Task ID <?= $row['id']; ?></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
            <label>ID</label>
            <input type="" name="" value="<?= $row['id']; ?>" disabled class="form-control    ">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
    <?php
}
 ?>

It's now fully done but it still remains, any clues?

Yeah, literally copied from w3schools lol

 

[TesoMayn]

Try this

foreach($getTasks as $row) {
    echo '<div id="' . $row["id"] . '" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title">Task ID = ' . $row["id"] . '</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>ID</label>
                    <input type="" name="" value="' . $row["id"] . '" disabled class="form-control    ">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>';
}

 

[Berk]

Try this

foreach($getTasks as $row) {
    echo '<div id="' . $row["id"] . '" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title">Task ID = ' . $row["id"] . '</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>ID</label>
                    <input type="" name="" value="' . $row["id"] . '" disabled class="form-control    ">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>';
}

You must be registered for see links

Still remains the same.

 

[TesoMayn]

You must be registered for see links

Still remains the same.

Do you have any custom CSS for any of the modal elements?

 

[Berk]

Do you have any custom CSS for any of the modal elements?

Nope. Only this skin's css. (47 Admin)

 

[TesoMayn]

Try doing this

.modal-backdrop {  z-index: -1; }

If that does nothing, you might have to make use !important

.modal-backdrop {  z-index: -1!important; }

 

[Berk]

Try doing this

.modal-backdrop {  z-index: -1; }

If that does nothing, you might have to make use !important

.modal-backdrop {  z-index: -1!important; }

That removed backdrop as expected, now it looks like this :

You must be registered for see links

 

[TesoMayn]

That removed backdrop as expected, now it looks like this :

You must be registered for see links

Try slowly raising the number until it shows up again

 

[Berk]

Try slowly raising the number until it shows up again

It's 1000 right now, not the modal though.. Fact that modal's z-index is 1040.

 

[TesoMayn]

By default .model-backdrop has a z-index of 1040, so the modal itself just need one higher than that, like 1041