Question

关闭弹出窗口后，div应该隐藏（当弹出窗口打开它确实隐藏时），但是当弹出窗口关闭时，它会变得可见。

/* Magnific Popup CSS */

.mfp-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1042;
    overflow: hidden;
    position: fixed;
    background: #0b0b0b;
    opacity: 0.8; }

.mfp-wrap {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1043;
    position: fixed;
    outline: none !important;
    -webkit-backface-visibility: hidden; }

.mfp-hide {
    display: none !important; }

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!doctype html>
<head>
    <style>
        .div_show {
            height: 33px; width: 198px; background-color: rgb(0, 123, 209);
            position: absolute;
            transition: bottom .3s;
            bottom: -33px;
        }
        .hoverside:hover .div_show{
            bottom: 0px;
        }
        .hoverside {
            background-color: rgb(255, 255, 255);
            width: 200px;
            height: 150px;
            border-radius: 3px;
            border: 1px solid #dddddd;
            float: left;
            position: relative;
            overflow: hidden;
        }
        .popup{
            width: 400px;
            height:150px;
            background-color: #f5f5f5;
            position: absolute;
            bottom: 40%;
            left: 50%;
        }
    </style>
</head>
<body>

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('.popup-content').magnificPopup({
            type: 'inline'
        });
    });
</script>

    <div>
        <div class="hoverside">
            <a href="#popup" class="popup-content">
                <div class="div_show">
                    <p class="link">Click</p>
                </div>
            </a>
            <div id="popup" class="popup mfp-hide">
                <h3>Popup</h3>
            </div>
        </div>
    </div>

String filePath = "/storage/emulated/0/Pictures/park.jpg";

            Bitmap screenShot = BitmapFactory.decodeFile(filePath);
            File pic = new File(filePath);
            FileOutputStream out = null;
            try {
                out = new FileOutputStream(pic);
                screenShot.compress(Bitmap.CompressFormat.JPEG, 100, out);
                out.flush();
                out.close();
            } catch (FileNotFoundException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }

            Uri uri = Uri.fromFile(pic);

            Intent sendIntent = new Intent(Intent.ACTION_SEND);
            sendIntent.setType("message/rfc822");
            sendIntent.putExtra(Intent.EXTRA_STREAM, uri);
            Intent chooser = Intent.createChooser(sendIntent, "Send Image");

            if(sendIntent.resolveActivity(getPackageManager()) != null)
                startActivity(chooser);
            else
                Toast.makeText(ScreenShortAlertDialogue.this, "No Available Applications to send the image", Toast.LENGTH_LONG).show();

指向该区域，出现蓝色div。点击一下。出现一个弹出窗口，蓝色div消失。好的，这就是我需要的。但是当您关闭弹出窗口时，蓝色div将重新出现。如何解决？

Answer 1

使用默认插件css。之后，只需激活插件。然后把你需要的东西剔除。这是回购http://dimsemenov.com/plugins/magnific-popup/

Answer 2

如果您将autoFocusLast: true设置为autoFocusLast: false，则在弹出窗口显示前最后一个聚焦元素将在弹出窗口关闭后聚焦。您可以设置{ "type":"TabularTranslator", "columnMappings":{ "AS_OF_DATE":"AS_OF_DATE", "SECTOR_ID":"SECTOR_ID", "ASSET_GROUP":"ASSET_GROUP", "REGION":"REGION", "COUNTRY":"COUNTRY", "FIELD":"FIELD", "SECTOR_FLAG":"SECTOR_FLAG", "PRODUCT":"PRODUCT", "PERIODICITY":"PERIODICITY", "UNIT_CODE":"UNIT_CODE", "OPERATORSHIP":"OPERATORSHIP", "OPRNAME":"OPRNAME", "ACTUAL":"ACTUAL", "PLAN":"PLAN", "SOURCE_ID":"@{pipeline().parameters.sourceIDmpm}" } }来隐藏最后一个焦点元素。

示例示例：https://codepen.io/rubel/pen/ZZQved

查看更多信息：https://dimsemenov.com/plugins/magnific-popup/documentation.html#autofocuslast

“Magnific Popup”并在悬停打开弹出窗口的div时离开

2 个答案: