プロジェクトでMagnific Pop upを使用していますが、現在はモーダルとしてASP MVCプロジェクトで使用しています。
モーダル
div id="js_DeleteNewSongsPopup" class="theme-primary ajax-form popup-basic admin-form mfp-with-anim modalPopup">
<div class="panel">
<div class="panel-heading">
<span class="panel-title">
<i class="fa fa-ban "></i>Reject Selected Song
</span>
</div>
@* Information Body *@
<div class="panel-body p25">
<div class="section row">
<div class="col-md-12 text-center">
<h3>
Are you sure you want to <b class="text-danger">reject</b> the selected Songs?
</h3>
<p>
Please note, these will be <b class="text-danger">deleted</b> and no longer accessable
</p>
</div>
</div>
</div>
@* Form Body *@
<div class="panel-footer">
<div class="text-center">
<fieldset>
<input type="button" class="btn btn-primary js_CancelForm" value="Cancel" data-bind="click: function(){ $.magnificPopup.close(); }">
<input type="button" class="btn btn-danger js_DeleteNewSongsButton" value="Delete" data-bind="click: $root.submitDeleteNewSongs">
</fieldset>
</div>
</div>
</div>
<button title="Close (Esc)" type="button" class="mfp-close">×</button>
JavaScript
/* Delete New Songs Popup*/
$(document).on("click",
".js_DeleteNewSongs",
function (e) {
e.preventDefault();
var popup = $("#js_DeleteNewSongsPopup");
$.magnificPopup.open({
removalDelay: 500, //delay removal by X to allow out-animation,
items: {
src: $(popup)
},
callbacks: {
beforeOpen: function (e) {
this.st.mainClass = 'mfp-slideUp';
},
close: function () {
}
},
midClick: true
// allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
return false;
});
コンソールエラーが報告されていないため、アイデアはありません。また、マークアップが同じであるときに、別のページで動作している理由もわかりません
回答 2 件
使用して終わった:
$('.js_CancelForm').on("click", function () { $.magnificPopup.close(); });
これで、期待どおりにポップアップが閉じます。
関連記事
- モーダルコンテンツの外側をクリックした場合にのみオーバーレイを閉じます
- モーダルからフォームデータを送信すると、モーダルは閉じません。
- MS Accessデータベースを閉じ、フォームを無視しますclose cancel true
- モーダル閉じるボタン機能が正しく機能しない
- タイムアウト後にNativescript-Vueがモーダルを閉じる
- Ajax Modalのフェードイン、クローズ、フェードアウト
- プログラムでモーダルボトムシートを閉じる
- モーダルの外側をクリックするだけでなく、Xアイコンを使用してマテリアルUIモーダルを閉じるにはどうすればよいですか?
- ブートストラップモーダルは、本文の入力に近いポップアップにフォーカスを設定
試してください:
または
基本的に、「モーダル」クラスを削除する必要があります。