1

私は自分のサイトのモーダル ウィンドウに取り組んできました。ajax を思い通りに動作させることができないので、次のように作成しました。

モーダル ウィンドウと背景は、ページの読み込み時に非表示にしている asp パネル コントロールです (これを行うコードは arb であることに同意しますが、それを改善することはできませんでした)。

以下は、モーダルの html (事前レンダリング) です。

<asp:Panel runat="server" ID="pnlModalbg" CssClass="modalbg"> </asp:Panel>
<asp:Panel runat="server" ID="pnlModal" CssClass="modal">
    <!-- Modal content goes here -->
    <p>Lorem ipsum dolor sit amet...</p>
    <!-- End Modal content -->

    <!-- Close button -->
    <div class="centeralign"><asp:Button runat="server" ID="btnCloseModal" Text="Close" CssClass="button" /></div>
    <!-- End close button -->
</asp:Panel>

とてもシンプルです。これが、表示/非表示に使用しているコードです。上記のパネルは、ページの読み込み時に非表示にし、GridView.RowCommand イベントで表示する必要があります。これは問題なく機能しますが、これが最善の方法であるとは思えません。

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then

        pnlModal.Style(HtmlTextWriterStyle.Display) = "none"
        pnlModalbg.Style(HtmlTextWriterStyle.Display) = "none"
    End If

End Sub

Protected Sub gvAppointments_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles gvAppointments.RowCommand

    If e.CommandName = "ViewAppt" Then

        lblAppointmentId.Text = e.CommandArgument

        GetDetails()

        pnlModal.Style(HtmlTextWriterStyle.Display) = "block"

        pnlModalbg.Style(HtmlTextWriterStyle.Display) = "block"

    End If
End Sub

Protected Sub btnCloseModal_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnCloseModal.Click

    pnlModalbg.Style(HtmlTextWriterStyle.Display) = "none"
    pnlModal.Style(HtmlTextWriterStyle.Display) = "none"

End Sub

ここからが本当の問題です。CSS。これにより、モーダル ウィンドウは、画面の解像度に関係なく、ブラウザー ウィンドウの上端から 150 ピクセル、ブラウザー ウィンドウの左端から 450 ピクセルの位置に配置されます。そうではありません。水平方向の配置は、テストしたすべての画面で異なります。

margin: 150px auto;理想的には、配置のためにクラスでマージン (できれば )を使用したいのです.modalが、絶対配置がないと、ページ コンテンツの残りの部分に常に詰め込まれて表示されます。また、.modalbgパネルはモーダル ウィンドウ自体の上に表示されます。適用.modal {z-index: 9999;}して.modalbg {z-index: -1;}役立ちますが、modalbg はページ上の他の要素の背後にあるように見え、z-index 値を変更してもこれは修正されません。

.modal
{
    border: 2px solid #014073;
    border-radius: 5px;
    left: 450px;
    top: 150px;
    display: none;
    position: absolute;
    background: #fff;
    padding: 10px;
}

.modalbg
{
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    -moz-opacity:.30;
    filter:alpha(opacity=30);
    opacity:.30;
    display: none;
}

サーバー コードでディスプレイの CSS を変更しなければならないことは気にしませんが、CSS の問題に関するヘルプは大歓迎です。

4

1 に答える 1

2

したがって、モーダルを改良し、この質問に対する回答がないことを確認した後、モーダル ウィンドウの現在のテンプレートを次に示します。

HTML

<a href="#" class="showModal">Show Modal</a>

<div class="modalbg" onclick="hideModal();">
</div>
<div class="modal">
    <!-- Content goes here -->

    <a href="#" class="hideModal">Hide Modal</a>
</div>

それは非常に単純で、本当にいくつかの div だけです。モーダル背景として機能するものは空で、もう 1 つは実際のモーダル ウィンドウで、好きなようにスタイルを設定できます。また、モーダルを表示するリンクまたはユーザーがクリックできるものも必要です。

また、モーダルの背景に onclick を追加して、クリックされた場合にモーダルを非表示にして、ユーザーが引き続きサイトの残りの部分を使用できるようにしました。これが不可能な Web サイトをいくつか見たことがありますが、実際には非常に煩わしいものです。

CSS

.modal
{
    box-shadow: 0 0 10px 2px #a1a1a1;
    border-radius: 5px;
    margin: 0 auto;
    display: none;
    position: absolute;
    background: #c1c1c1;
    padding: 10px;
}

.modalbg
{
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    -moz-opacity:.30;
    filter:alpha(opacity=30);
    opacity:.30;
    display: none;
    z-index: 0;
}

質問はcssに関するものだったので、ここに私が持っているものがあります。基本的に、モーダル背景はブラウザ ウィンドウ全体を左上隅から右下までカバーする必要があります。モーダルは0 auto、ページの中央に正しく配置されるように余白に配置されます (上下の余白は好みに合わせて調整できます)。これは、質問したときに問題が発生した場所ですが、このテンプレートでは問題にならないはずです。

そして、これをすべて機能させるための JQuery を次に示します。

var modalbg = $(".modalbg");
var modal = $(".modal");

$(".showModal").click(function() {
    modalbg.fadeIn(500);
    modal.fadeIn(500);
});

$(".hideModal").click(function() {
    hideModal();
});

function hideModal() {
    // It's important here to blank out any form fields you may have on the modal
    // use $("#field_name").text = "";

    modalbg.fadeOut(500);
    modal.fadeOut(500);
}

ほとんどの場合、JQuery はモーダルの表示/非表示を容易にするだけです。おそらくこれを改善する方法があると思いますが、現状のままで完全に機能します。

于 2012-12-05T07:05:12.830 に答える