带有复选框的Bootstrap模式，以便将来不显示

Question

I am trying to show a bootstrap modal on body load based on value from mysql database. I have included bootstrap modal in body and showing it successfully according to database value with:

    $resultsPop = mysql_query("select popup from members where mid=" . $mid);
    $pop = mysql_result($resultsPop, 0, "popup");
    if($pop == 0) {
            $popupval = "<script type='text/javascript'>$(window).load(function(){ $('#MyPopUp').modal('show'); });</script>";
    } else {
            $popupval = "";
    }
echo $popupval;

And my modal code is:

  <div class="modal fade" id="MyPopUp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Welcome</h4>
            </div>

                <div class="modal-body" style="text-align: center;">
                   <span>
                        Welcome Popup
                  </span>
                </div>
        </div>
    </div>
</div>

Now, I want to have a checkbox in the modal which on checked can silently pass value 1 and logged in member variable $mid value to a php page after user clicks on modal close button. So, popup value in members table is updated with 1 for that logged in member who do not want popup to be see again.

I have searched for such thing but couldn't successful and I am getting no idea on it.

Answer 1

Try this.

yourphpfile.php

<?php

$resultsPop = mysql_query("select popup from members where mid=" . $mid);
    $pop = mysql_result($resultsPop, 0, "popup");
    if($pop == 0) {
            $popupval = "<script type='text/javascript'>$(window).load(function(){ $('#MyPopUp').modal('show'); });</script>";
    } else {
            $popupval = "";
    }
echo $popupval;

$ppop = $_POST['pops'];
$username = $_POST['mids'];

//Here you can update your database with 1 where username is mids.

//On success 
$output = json_encode(array('type' => 'pop'));
die($output);

//Else

$output = json_encode(array('type' => 'error'));
die($output);

?>

<script>

$(document).ready(function(){

$("#closemodal").click(function(event){
    event.preventDefault();
    var popups            = $('#popups').val(); 
    var user_id           = $('#mids').val();
 
        $.ajax({
            type: 'post',
            url: yourphpfile.php,
            dataType: 'json',
            data: $('#yourform').serialize(),             
            success: function(data)
            {
                if(data.type == 'pop')
                {
                    $('#MyPopUp').modal('hide');                  
                  
                }
            }
        });

});

});

</script>

<div class="modal fade" id="MyPopUp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="">
            <div class="modal-header">
                <button type="button" class="close" id="closemodal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Welcome</h4>
            </div>

                <div class="modal-body" style="text-align: center;">
                   <span>
                        Welcome Popup
                  </span>
                  <form action="" id="yourform" method="POST" role="form">                    
                  
                    <div class="checkbox">
                      <label><input type="checkbox" name="pops" id="popups" value="1">Pops</label>
                    </div>
                    <input type="hidden" id="mids" name="mids" value="<?php echo $_SESSION['mids']; ?>">                  
                  </form>
                </div>
        </div>
    </div>
</div>

</div>