目次
マスク画像の作り方:
Step 1: まず、XD からの画像を「交差」(Intersect)させます.
Step 2: そのイメージを Visual Studio で開きます.
Step 3: 正確な形状を取得するには、その svg ファイルからパス 'd'、'viewbox' などを取得し、次のようなコードに入力します。
<svg class="shape" version="1.1" x="0px" y="0px" viewBox="0 0 200 240" style="text-align: center">
<clipPath id="svgPath"> <path d="M74.7,240.5c-19.2-3.835-18.009-28.65-29.519-39.582-20.9-19.846-29.938-33.123-29.938-48.313,0-35.873-4.355-63.067,23.6-108.487C57.4,13.969,91.054,2.855,122.7.5h27.925q1.175.083,2.333.178c32.276,2.649,26.41,32.719,43.7,42.267,17.317,9.562,19.21,44.433,18.076,64.241-1.26,21.986-20,30.313-19.414,50.337.575,19.672,8.371,34.516-21.614,59.018C153.529,233.028,123.8,238.9,97.426,240.5Z" transform="translate(-14.563 0)"/>
</clipPath>
</svg>
ここでは、後で使用するために「clipPath」に Id を作成します
Step 4: クラスで img タグを作成する. <img class="mask" src="/assets/img/content.png" alt="content">
Step 5: 前に作成したクラスと Id の css を作成します。
.mask { -webkit-clip-path: url(#svgPath);
clip-path: url(#svgPath);
}
複数のデータで複数のモーダルを作成します:
Step 1:
そのmodaal create変数のそれぞれを閉じるボタンですべてのmodaalクラスを取得するには。
// Get the modal
var modalparent = document.getElementsByClassName("modal_multi");
// Get the button that opens the modal
var modal_btn_multi = document.getElementsByClassName("myBtn_multi");
// Get the <span> element that closes the modal
var span_close_multi = document.getElementsByClassName("close_multi");
Step 2:
まず、各モーダル要素のデータを設定する必要があります。
function setDataIndex() {
for (i = 0; i < modal_btn_multi.length; i++)
{
modal_btn_multi[i].setAttribute('data-index', i);
modalparent[i].setAttribute('data-index', i);
span_close_multi[i].setAttribute('data-index', i);
}
}
Step 3:
次に、「for ループ」を使用して、各要素の属性とデータを取得します。
for (var i = 0; i < modal_btn_multi.length; i++)
{
modal_btn_multi[i].onclick = function() {
var ElementIndex = this.getAttribute('data-index');
modalparent[ElementIndex].style.display = "block";
document.getElementsByTagName('body')[0].style = 'overflow-y: hidden';//*To hide the scrollbar
};
// When the user clicks on <span> (x), close the modal
span_close_multi[i].onclick = function() {
var ElementIndex = this.getAttribute('data-index');
modalparent[ElementIndex].style.display = "none";
document.getElementsByTagName('body')[0].style = 'overflow-y: auto';//* To show again the scrollbar
};
}
最後に、ウィンドウの関数を呼び出すだけです。
window.onload = function() {
setDataIndex();
};
window.onclick = function(event) {
if (event.target === modalparent[event.target.getAttribute('data-index')]) {
modalparent[event.target.getAttribute('data-index')].style.display = "none";
document.getElementsByTagName('body')[0].style = 'overflow-y: auto';//* To show again the scrollbar
}
};
1 フレーム内のコード全体:
// Get the modal
var modalparent = document.getElementsByClassName("modal_multi");
// Get the button that opens the modal
var modal_btn_multi = document.getElementsByClassName("myBtn_multi");
// Get the <span> element that closes the modal
var span_close_multi = document.getElementsByClassName("close_multi");
// When the user clicks the button, open the modal
function setDataIndex() {
for (i = 0; i < modal_btn_multi.length; i++)
{
modal_btn_multi[i].setAttribute('data-index', i);
modalparent[i].setAttribute('data-index', i);
span_close_multi[i].setAttribute('data-index', i);
}
}
for (var i = 0; i < modal_btn_multi.length; i++)
{
modal_btn_multi[i].onclick = function() {
var ElementIndex = this.getAttribute('data-index');
modalparent[ElementIndex].style.display = "block";
document.getElementsByTagName('body')[0].style = 'overflow-y: hidden';//*To hide the scrollbar
};
// When the user clicks on <span> (x), close the modal
span_close_multi[i].onclick = function() {
var ElementIndex = this.getAttribute('data-index');
modalparent[ElementIndex].style.display = "none";
document.getElementsByTagName('body')[0].style = 'overflow-y: auto';//* To show again the scrollbar
};
}
window.onload = function() {
setDataIndex();
};
window.onclick = function(event) {
if (event.target === modalparent[event.target.getAttribute('data-index')]) {
modalparent[event.target.getAttribute('data-index')].style.display = "none";
document.getElementsByTagName('body')[0].style = 'overflow-y: auto';//* To show again the scrollbar
}
};
