Question

的CSS：

<style>
    #head3{
        color: #fff;
        text-align: center;
        font-weight: bold;
        background-image: url(images/flag/sab.jpg);
        background-size: 1095px 180px;
        background-repeat: no-repeat;
        height: 180px;
    }
    .flip-container {
        perspective: 1000px;
    }
        .flip-container:hover .flipper, .flip-container.hover .flipper {
            transform: rotateY(180deg);
        }

    .flip-container, .front, .back {
        width: 240px;
        height: 140px;
    }
    .flipper {
        transition: 0.6s;
        transform-style: preserve-3d;

        position: relative;
    }
    .front, .back {
        backface-visibility: hidden;

        position: absolute;
        top: 0;
        left: 0;
    }
    .front {
        z-index: 2;
        transform: rotateY(0deg);
    }
    .back {
        background: orange;
        transform: rotateY(180deg);
    }

    #head5{
        text-align: center;
        margin-top: 50px;
        font-weight: bold;
        color: #fff;
    }
    .modalDialog {
        position: fixed;
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.8);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
    }
    .modalDialog:target {
        opacity:1;
        pointer-events: auto;
    }
    .modalDialog > div {
        width: 800px;
        position: relative;
        margin: 5% auto;
        padding: 5px 20px 13px 20px;
        background: #fff;
    }
    .close {
        background: #606061;
        color: #FFFFFF;
        line-height: 25px;
        position: absolute;
        right: -12px;
        text-align: center;
        top: -10px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
    }
    .close:hover {
        background: #00d9ff;
    }

    #heading{
        color: #fff;
        text-align: center;
        font-weight: bold;
        background: #260663;
        width: 240px;
    }
</style>

代码：

<?php
        $sql = "select * from country";
        $result = mysqli_query($link,$sql);
        while ($fetch = mysqli_fetch_array($result)) 
        {
            $id = $fetch['id'];
            $about = $fetch['about'];
            $country_name = $fetch['country_name'];
?>
<div class="col-md-3">
        <h5 id="heading"><?php echo $fetch['country_name']; ?></h5>
        <div class="flip-container" ontouchstart="this.classList.toggle('hover');" style="margin-top: -15px;">
            <div class="flipper">
                <div class="front">
                    <img src="super_admin/country/flag/<?php echo $fetch['flag']; ?>" alt="USA" width="240" height="140">
                </div>
                <div class="back">
                    <h5 id="head5">About USA&nbsp;<span><a href="#<?php echo $country_name; ?>">(click)</a></span></h5>
                </div>
            </div>
        </div>
        <h5 id="heading">Search Colleges</h5>
    </div>
<?php 
      }
?>

<div id="<?php echo $country_name; ?>" class="modalDialog">
    <div><a href="#close" title="Close" class="close">X</a>
         <h2><?php echo $country_name; ?></h2>
         <p><?php echo $about; ?></p>
    </div>
</div>

在此代码中，我想根据国家/地区名称打开不同模式。

<span><a href="#<?php echo $country_name; ?>">(click)</a></span>

这里我是echo $ country_name但是没有模态显示但是当我定义openModal代替$ country_name模式打开时，如何根据country_name打开不同的模态？

谢谢

Answer 1

=IF(ISNUMBER(A1),A1,VALUE(A1))

我们如何按名称打开不同的模态？

1 个答案: