ホームページ  >  記事  >  ウェブフロントエンド  >  jqueryのダイアログボックスプラグインをフレームページ(iframe)に変更する方法_jquery

jqueryのダイアログボックスプラグインをフレームページ(iframe)に変更する方法_jquery

WBOY
WBOYオリジナル
2016-05-16 18:19:441078ブラウズ

jquery には非常に優れた ui プラグインとダイアログ プラグインがあり、公式 Web サイトにはさまざまな形式のデモンストレーションがあります: http://jqueryui.com/demos/dialog/ 、おそらく、誰もがより頻繁に使用するのはデフォルトのモードです。具体的な手順は、Judge の Web サイトで入手できます。また、中国語での説明のアドレスもあります。私は最近、ポップに取り組んでいます。 -up フレーム ページをよく見てください。ダイアログ プラグイン モーダル フォーム モードは非常に似ており、デモ効果は次のとおりです: http://www.lovewebgames.com/addNews。 aspx
jqueryのダイアログボックスプラグインをフレームページ(iframe)に変更する方法_jquery
これは効果です。ログインする必要があります。なぜモーダル フォームを使用しないのですか?私が好きだから、あなたは私をコントロールします。そこで、jquery の下にダイアログ用のプラグインを作成しました。これは、元のダイアログ ファイルを参照する必要があります。具体的なコードは次のとおりです:

コードをコピー コードは次のとおりです:

(function ($) {
$.fn.openWidow = function (options) {
var divId = "dialog" Math.round(Math.random() * 100);
var settings = {
id: divId 、
width: 300、
height: 200、
modal: true、
buttons: {
}、
show: "explode"、
隠す: "ハイライト" 、
タイトル: "プロンプト"、
url: "/test.aspx"、
閉じる: function () {
$("#" this.id)。 delete();
//デバッガー
if (document.getElementById(this.id))
document.body.removeChild(document.getElementById(this.id))
};
if (オプション) {
$.extend(設定, オプション);
$("body").append('

');
// ダイアログ
$('#' settings.id) .dialog({
autoOpen: false,
title: settings.title,
width: settings.width,
height: settings.height,
modal: true,
bgiframe: true、
表示: settings.show、
非表示: settings.hide、
ボタン: settings.buttons、
閉じる: settings.close、
開く: function () {
$("#" settings .id).html('